@extends('layouts.dashboard')

@section('content')

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Branch List</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Branch</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">

    <div class="row">
      <div class="col-12 d-flex justify-content-end">
        <a href="{{ route('branch.add') }}" class="btn btn-sm uniqbtn-btn">
          <i class="fa fa-plus"></i>&nbsp; Add
        </a>
      </div>

      <div class="col-12 mt-3">
        <div class="card">
          <div class="card-body table-responsive p-2" style="height: 320px;">
            <table id="branch-table" class="table table-striped table-bordered text-wrap text-center branch-tble">
              <thead>
                <tr>
                  <th>Sr No.</th>
                  <th>Office Name</th>
                  <th>Email</th>
                  <th>Mobile Number</th>
                  <th>Location</th>
                  <th>Office Type</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

@endsection

@push('scripts')
<script>
$(document).ready(function() {

  // Initialize DataTable
  var table = $('#branch-table').DataTable({
    processing: true,
    serverSide: true,
    bLengthChange: false,
    order: [[0, "desc"]],
    pageLength: 15,
    searching: true,
    ajax: { url: '{{ route("branch.index") }}' },
    columnDefs: [{ targets: '_all', className: 'text-center' }],
    columns: [
      { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
      { data: 'office_name', name: 'office_name' },
      { data: 'email', name: 'email' },
      { data: 'mobile_number', name: 'mobile_number' },
      { data: 'location', name: 'location' },
      { data: 'office_type', name: 'office_type' },
      { data: 'action', name: 'action', orderable: false, searchable: false }
    ]
  });

  // Delete Branch with SweetAlert confirmation
  $(document).on('click', '.deleteBranch', function() {
    var id = $(this).data('id');
    Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if(result.isConfirmed) {
        $.ajax({
          url: "{{ url('branch/delete') }}/" + id,
          type: "DELETE",
          data: { _token: '{{ csrf_token() }}' },
          success: function(response) {
            table.ajax.reload(); // Reload table
            Swal.fire('Deleted!', response.message, 'success');
          },
          error: function(xhr) {
            Swal.fire('Error!', 'Something went wrong!', 'error');
          }
        });
      }
    });
  });

  // SweetAlert for Add/Edit Success
  @if(Session::has('message'))
    Swal.fire({
      title: 'Success!',
      text: '{{ Session::get("message") }}',
      icon: 'success'
    });
  @endif

});
</script>
@endpush