@extends('layouts.app')
@section('title', 'Depletion Job Import')
@section('content')
   <div class="fixed-action-bar d-flex align-items-center justify-content-between">
      <div class="fw-semibold fixed-nav-title">Depletion Job Import</div>
      <div class="d-flex align-items-center">
         <a href="{{ route('depletion.index') }}">
            <i class="fa-solid fa-xmark fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center ms-1"
               data-toggle="tooltip" title="Close"></i>
         </a>
      </div>
   </div>

   <div class="row justify-content-center mt-3">
      <div class="col-md-8">
         <div class="card rounded-border">
            <div class="card-body">
               <h5 class="fw-bold mb-4">Upload Depletion Plan</h5>

               @if (session('error') || $errors->any())
                  <div class="alert alert-danger alert-dismissible fade show" role="alert">
                     @if (session('error'))
                        <div class="mb-2">{{ session('error') }}</div>
                     @endif
                     @foreach ($errors->all() as $error)
                        <div class="mb-1">{!! $error !!}</div>
                     @endforeach
                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                  </div>
               @endif

               @if (session('success'))
                  <div class="alert alert-success alert-dismissible fade show" role="alert">
                     {{ session('success') }}
                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                  </div>
               @endif

               <form action="{{ route('depletion.import') }}" method="POST" enctype="multipart/form-data">
                  @csrf
                  <div class="mb-4">
                     <label for="file-input" class="form-label fw-semibold">Select Excel File</label>
                     <input type="file" id="file-input" name="file" accept=".xlsx" class="form-control form-control-lg"
                        required>
                     <div class="form-text mt-2">Accepted formats: .xlsx only</div>
                  </div>

                  <div class="d-grid gap-2">
                     <button type="submit" class="btn btn-primary"
                        style="background-color: #EFA81E; border: none; color: black; font-weight: 600;">
                        <i class="fa-solid fa-upload me-2"></i> Import Plan
                     </button>
                  </div>
               </form>

               <hr class="my-4">

               <div class="d-flex justify-content-between align-items-center">
                  <div>
                     <h6 class="fw-bold mb-1">Need a template?</h6>
                     <p class="text-muted mb-0 small">Download the sample Excel file to ensure correct formatting.</p>
                  </div>
                  <a href="{{ asset('files/depletion_plan_import_template.xlsx') }}"
                     class="btn btn-outline-secondary btn-sm">
                     <i class="fa-solid fa-download me-1"></i> Download Template
                  </a>
               </div>
            </div>
         </div>
      </div>
   </div>
@endsection
@push('js')
   <script>
      document.addEventListener('DOMContentLoaded', function () {
         // Optional: Add any specific JS for file input styling if needed
      });
   </script>
@endpush