@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Crane Field</a></li>
    <li class="breadcrumb-item active" aria-current="page">List all Cranes Field</li>
  </ol>
</nav>
<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
          <div class="col-6 d-flex justify-content-end" style="width: 100%;">
              <a href="{{ route('crane.field.create') }}" id="add_fields" class="btn btn-primary" type="button"><i data-feather="plus"></i> Add Cranes Field</a>
          </div>
        <h6 class="card-title">List all Cranes Field</h6>
        @if (session('success'))
          <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong>Success!</strong> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        @endif

        @if (session('error'))
          <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>Error!</strong> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        @endif
        <div class="table-responsive">
          <table id="dataTableExample" class="table table-bordered">
            <thead class="table-light">
              <tr>
                <th>No</th>
                <th>Name</th>
                <th>Image</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
                        @foreach ($fields as $field)
              <tr>
                <td>{{ $no++ }}</td>
                <td>{{ $field->field_name }}</td>
                <td><img src="{{ asset('storage/CranesField/'.$field->field_image) }}">                </td>
                  <td>
                    <a href="{{ route('crane.field.show', $field->id) }}" class="btn btn-primary btn-sm" role="button">
                      <i data-feather="clipboard"></i> View
                    </a>     
                      <a href="{{ route('crane.field.edit', $field->id) }}" class="btn btn-primary btn-sm" role="button" aria-pressed="true" title="Edit">
                          <i data-feather="edit"></i>
                          Edit
                      </a>
                       <!-- Delete Button -->
                      <form action="{{ route('crane.field.destroy', $field->id) }}" method="POST" style="display:inline;" id="deleteForm{{ $field->id }}">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm" id="deleteCranesField" title="Delete">
                            <i data-feather="delete"></i> Delete
                        </button>
                      </form>
                  </td>
              </tr>
            @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script type="text/javascript" src="{{ asset('js/createCraneManagementJs.js') }}"></script>
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
    $(document).on('click', '#deleteCranesField', function (e) {
        e.preventDefault(); // Prevent form submission immediately

        var formId = $(this).closest('form').attr('id'); // Get form ID

        // Show SweetAlert confirmation
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel!',
        }).then((result) => {
            if (result.isConfirmed) {
                // Submit the form if confirmed
                $('#' + formId).submit();
            }
        });
    });
</script>
@endpush