@extends('admin.layout')

@section('content')

<!-- DataTable CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">

<style>
    .table-no-border {
        border: none;
    }

    .table-no-border th,
    .table-no-border td {
        border: none;
    }

    .table-responsive .dataTables_wrapper .dataTables_length select {
        padding: 8px 48px 8px 16px !important;
    }

    .btn-primary.submit-btn {
    background-color: #1e3a8a; /* A deep blue */
    border-color: #1e3a8a;
    color: #ffffff;
}

.btn-primary.submit-btn:hover {
    background-color: #1c357d;
    border-color: #1c357d;
}

</style>


<div class="container-fluid content-inner pb-0">
    <div class="page-header d-flex justify-content-between">
        <h1 class="page-title mb-0">Taluk AD</h2>
    </div>
   
    <!-- Create Notification Form -->
    <div class="row justify-content-center mt-3">
        <div class="col-lg-6">
            <div class="card p-3">
                <h6 class="card-title">Taluk AD</h6>
                <hr>
                <form action="" method="POST" enctype="multipart/form-data">
                  @csrf
                  <div class="row">
                      <div class="col-lg-12">
                          <div class="form-group mb-3">
                              <label for="district_id" class="form-label">Select District</label>
                              <select name="district_id" id="district_id" class="form-select">
                                  <option value="">-- Select District --</option>
                                 
                                  @foreach($districts as $district)
    <option value="{{ $district->id }}">{{ $district->district_name }}</option>
@endforeach

                              </select>
                              @error('district_id')
                                  <div class="text-danger">{{ $message }}</div>
                              @enderror
                          </div>
              
                          <div class="form-group mb-3">
                              <label for="taluk_id" class="form-label">Select Taluk</label>
                              <select name="taluk_id" id="taluk_id" class="form-select">
                                  <option value="">-- Select Taluk --</option>
                              </select>
                              @error('taluk_id')
                                  <div class="text-danger">{{ $message }}</div>
                              @enderror
                          </div>
              
                          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12 mb-2">
                              <label class="mb-2 filter-by-p">Image<small class="ms-1" style="color:#979797;">( size 342px - 170px )</small></label>
                              <div class="ad-upload-wrapper" id="ad-upload-wrapper">
                                  <div id="ad-upload-conditions" class="ad-upload-conditions text-center">
                                      <div><i class="fa-solid fa-file-arrow-up upload-icon"></i></div>
                                      <p class="text-center click-to-upload">Click to Upload</p>
                                      <div class="file-size-UHGHH">( Max file size: 5 MB, JPG Only )</div>
                                  </div>
                                  <img src="" id="ad-img-view" class="img-fluid img-responsive">
                                  <input style="display:none;" name="image" class="upload-ads-img" type="file" id="upload-ad-img">
                              </div>
                          </div>
              
                          <div class="button-container mt-4">
                              <button type="submit" class="btn btn-primary submit-btn">
                                  <i class="fa-regular fa-circle-check me-2"></i>Submit
                              </button>
                          </div>
                      </div>
                  </div>
              </form>
                
            </div>
        </div>
    </div>
    
    <!-- Notification Table -->
    <div class="row mt-3">
        <div class="col-lg-12">
            <h5>History</h5>
            {{-- <div class="card p-2 mt-2">
                <div class="table-responsive mt-3">
                    <table class="table table-no-border" id="notificationTable">
                        <thead>
                            <tr>
                                <th scope="col">S/N</th>
                                <th scope="col">TITLE</th>
                                <th scope="col">DESCRIPTION</th>
                                <th scope="col">CREATED DATE</th>
                                <th scope="col">ACTION</th>
                            </tr>
                        </thead>
                        @php
                        $sn = 1; // Initialize serial number
                      @endphp
                      <tbody>
                        @foreach ($notification as $notifi)
                          <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $notifi->title }}</td>
                            <td>{{ $notifi->description }}</td>
                            <td>{{ $notifi->created_at->format('Y-m-d') }}</td>
        
                            <td>
                              <button type="button" data-bs-toggle="modal" data-bs-target="#deleteModal"
                                class="btn transparent-btn" data-user-id="{{ $notifi->id }}" onclick="setDeleteId(this)"><i
                                  class="fa-regular fa-trash-can delete-icon" data-bs-toggle="tooltip" data-bs-placement="top"
                                  data-bs-title="Delete"></i></button>
                            </td>
                          </tr>
                        @endforeach
                      </tbody>
                        <!--Delete Modal start-->

              <div class="modal fade zoom-in" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel"
              aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-body">
                    <div class="row">
                      <div class="col-lg-12">
                        <div class="p-3">
                          <div class="text-center">
                            <img class="mb-3" src="{{ asset('/assets') }}/images/icons/delete-icon.svg">
                            <p class="my-4 are-you-sure"></p>
                            <p class="text-muted my-2 are-you-sure-subtext">Are you sure
                              want to Delete this?</p>
                          </div>
                          <form action="{{ route('delete_notification') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="delete_id" name="delete_id">
                            <div class="d-flex align-items-center mt-5 mb-3">
                              <button type="button" class="btn btn-light cancel-btn me-3"
                                data-bs-dismiss="modal">Cancel</button>
                              <button type="submit" class="btn btn-primary yes-btn">
                                <i class="fa-regular fa-circle-check me-2"></i>Yes,
                                Delete
                              </button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--Delete Modal Ends-->
                    </table>
                </div>
            </div> --}}
        </div>
    </div>
</div>
 
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  document.getElementById('district_id').addEventListener('change', function() {
    let districtId = this.value;
    if (districtId) {
        fetch(`/get_taluks/${districtId}`)
            .then(response => response.json())
            .then(data => {
                let talukSelect = document.getElementById('taluk_id');
                talukSelect.innerHTML = '<option value="">-- Select Taluk --</option>'; // Clear existing options
                
                // Populate with new taluks
                data.forEach(function(taluk) {
                    let option = document.createElement('option');
                    option.value = taluk.id;
                    option.textContent = taluk.taluk_name;
                    talukSelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error fetching taluks:', error));
    } else {
        document.getElementById('taluk_id').innerHTML = '<option value="">-- Select Taluk --</option>';
    }
});


</script>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(document).ready(function () {
        $('#notificationTable').DataTable();
    });
</script>