@extends('admin.admin_dashboard')
@section('admin')

{{-- jQuery & Select2 CSS/JS --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link
  href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="page-content">
  <div
    class="page-breadcrumb d-flex justify-content-between align-items-center mb-3 p-3 bg-primary text-white rounded shadow-sm"
  >
    <h5 class="mb-0">Import Bank Statement</h5>
    <a href="{{ route('bank.import.form') }}" class="btn btn-light">
      <i class="bx bx-file-import me-1"></i> Reload
    </a>
  </div>

  <div class="card shadow-sm rounded-lg border-0">
    <div class="card-body p-4">
      <form
        method="POST"
        action="{{ route('bank.import.store') }}"
        enctype="multipart/form-data"
      >
        @csrf
        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label">Bank Account</label>
            <select
              name="account_id"
              class="form-select account-select"
            >
              <option value="">Select account…</option>
              @foreach($accounts as $id => $name)
                <option
                  value="{{ $id }}"
                  @selected(old('account_id')==$id)
                >{{ $name }}</option>
              @endforeach
            </select>
            @error('account_id')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>
          <div class="col-md-6">
            <label class="form-label">CSV File</label>
            <input
              type="file"
              name="file"
              class="form-control"
            >
            @error('file')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>
        </div>

        <div class="mt-4 text-end">
          <button class="btn btn-success">
            <i class="bx bx-upload me-1"></i> Import
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- Initialize Select2 --}}
<script>
$(function(){
  $('.account-select').select2({
    theme: 'bootstrap-5',
    placeholder: 'Select account',
    allowClear: true,
    width: '100%'
  });
});
</script>

@endsection