@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage-location';
    @endphp
    <div class="layout-px-spacing">
        <div class="middle-content container-xxl p-0">
            <div class="row layout-top-spacing ">
                <div class="top-tabel">
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="card-title">Manage States</h6>
                        </div>
                        <div class="col-md-8">

                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                    <div class="widget-content widget-content-area br-8 position-btn" style="overflow: auto;">
                        <table id="zero-config" class="table dt-table-hover location_table" style="width:100%">
                            <thead class="text-center">
                                <meta name="csrf-token" content="{{ csrf_token() }}">
                                <tr>
                                    <th class="text-center">Sr no</th>
                                    <th class="text-center">Location</th>
                                    <th class="no-content">Status</th>

                                    <th class="no-content">Action</th>
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                @foreach ($location as $locations)
                                    <tr>
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td class="text-center">{{ $locations->name }}</td>
                                        <td class="text-start">
                                            <div class="switch-btn">
                                                <input type="checkbox" data-id = "{{ $locations->id }}"
                                                    class="active_location" id="switch{{ $locations->id }}" value="1"
                                                    {{ $locations->is_active ? 'checked' : '' }} switch="bool" />
                                                <label for="switch{{ $locations->id }}" data-on-label="Active"
                                                    data-off-label="Expired"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="dropout">
                                                <button class="more">
                                                    <span></span>
                                                    <span></span>
                                                    <span></span>
                                                </button>
                                                <ul>
                                                    <li>
                                                        <!-- <div class="switch-btn">
                                                                                            <input
                                                                                                type="checkbox" data-id = "{{ $locations->id }}"
                                                                                                class="active_location" id="switch{{ $locations->id }}" value="1"
                                                                                                  {{ $locations->is_active ? 'checked' : '' }}
                                                                                                switch="bool" />
                                                                                            <label for="switch{{ $locations->id }}" data-on-label="Active"
                                                                                                data-off-label="Expired"></label>
                                                                                        </div> -->
                                                    </li>
                                                    <li>





        <a href="#"
           data-toggle="modal"
           data-target="#edit-location-modal"
           class="edit_location_value"
           data-location-id="{{ $locations->id }}"
           data-location-name="{{ $locations->name }}"
           data-location-timehours="{{ $locations->timeInterval->isNotEmpty() ? $locations->timeInterval->first()->time_hours : '' }}"
           data-location-timeinterval="{{ $locations->timeInterval->isNotEmpty() ? $locations->timeInterval->first()->time_interval : '' }}"
           data-location-quantity="{{ $locations->timeInterval->isNotEmpty() ? $locations->timeInterval->first()->quantity : '' }}">
           <img src="{{ asset('public/assets/img/edit.svg') }}" />
           <span>Edit</span>
        </a>






                                                    </li>
                                                    <li>
                                                        <a class="delete_location" data-id="{{ $locations->id }}"
                                                            data-toggle="modal" data-target="#delete-location-modal">
                                                            <img
                                                                src="{{ asset('public/assets/img/delete-recycle.svg') }}" />
                                                            <span>Delete</span>
                                                        </a>
                                                    </li>

                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="modal fade" id="add_location_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-header p-0">
                        <h5 class="modal-title">Add State</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="row">
                        <form id="store_location">
                            @csrf
                            <div class="col-md-12">
                                <label for="location_name">Name</label>
                                <input id="location_name" name="location_name" class="form-control" type="text">

                                <label for="timeHours" class="label">Time in hours between redeeming two drinks</label>
                                <input type="number" class="form-control" id="timeHours" name="timeHours" required>

                                <label for="timeQuantity" class="label">Maximum number of drinks</label>
                                <div class="input-group">
                                    <select class="form-control" id="timeInterval" name="timeInterval" required>
                                        {{-- <option value="day">Day</option>
                                        <option value="week">Week</option> --}}
                                        <option value="month">Month</option>
                                    </select>
                                    <input type="number" class="form-control" id="timeQuantity" name="timeQuantity"
                                        required>
                                </div>
                            </div>
                            <button type="submit" id="submit_location" class="download-btn-custom mt-4 mx-auto w-25">
                                <span>Save</span>
                            </button>
                        </form>
                    </div>



                </div>
            </div>
        </div>
    </div>



<div class="modal fade" id="edit-location-modal" tabindex="-1" role="dialog" aria-labelledby="editLocationModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="edit_location" enctype="multipart/form-data">
        @csrf
        <input class="form-control" name="id" type="hidden" id="location_id" value="">
        <input class="form-control" name="manage_state_xid" type="hidden" id="manage_state_xid" value="">
        <div class="modal-header">
          <h5 class="modal-title" id="editLocationModalLabel">Edit Location</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="location-name">Location Name</label>
            <input type="text" class="form-control" id="location-name" name="location_name">
          </div>
          <div class="form-group">
            <label for="time-hours">Time in hours between redeeming two drinks</label>
            <input type="number" class="form-control" id="time-hours" name="time_hours">
          </div>
          <div class="form-group">
            <label for="time-interval">Maximum number of drinks</label>
            <select class="form-control" id="time-interval" name="time_interval">
              {{-- <option value="day">Day</option>
              <option value="week">Week</option> --}}
              <option value="month">Month</option>
            </select>
          </div>
          <div class="form-group">
            <label for="quantity">Quantity</label>
            <input type="number" class="form-control" id="quantity" name="quantity">
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" id="update_location" class="download-btn-custom mt-4 mx-auto w-25">
            <span>Save</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>







    <div class="modal fade" id="delete-location-modal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                        x
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="delete_location_id" name="location_id">
                    <p class="modal-text">Are you sure you want to<br>Delete </p>
                    <div class="modal-btn d-flex ">
                        <a type="button" class="extra-btn" data-dismiss="modal">No</a>
                        <a type="button" class="download-btn-custom delete_location_button" data-dismiss="modal">Yes</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection
@section('section_script')
    <script src="{{ asset('public/assets/js/admin/manage_location/main.js') }}"></script>
    <script src="{{ asset('public/assets/js/admin/manage_location/add_location.js') }}"></script>
    <script src="{{ asset('public/assets/js/admin/manage_location/edit_location.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(' <button><a class="extra-btn width-max-content" data-toggle="modal" data-target="#add_location_modal" href="">Add</a></button>')
                .insertBefore("#zero-config_filter label");
        });
    </script>
    <script>





$(document).ready(function() {
    $(document).on("click", ".edit_location_value", function (e) {
        e.preventDefault(); // Prevent default action

        var locationId = $(this).data('location-id');
        var locationName = $(this).data('location-name');
        var timeHours = $(this).data('location-timehours');
        var timeInterval = $(this).data('location-timeinterval');
        var quantity = $(this).data('location-quantity');

        console.log('Location ID:', locationId);
        console.log('Location Name:', locationName);
        console.log('Time Hours:', timeHours);
        console.log('Time Interval:', timeInterval);
        console.log('Quantity:', quantity);

        $('#location_id').val(locationId);
        $('#location-name').val(locationName);
        $('#time-hours').val(timeHours);
        $('#time-interval').val(timeInterval);
        $('#quantity').val(quantity);

        $('#edit-location-modal').modal('show');
    });
});
</script>



         <script>
  $(document).ready(function() {
    // Assuming you have a mechanism to set manage_state_xid in the modal
    $('#edit-location-modal').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var locationId = button.data('location-id'); // Extract info from data-* attributes
        var manageStateXid = button.data('manage-state-xid');

        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content.
        var modal = $(this);
        modal.find('#location_id').val(locationId);
        modal.find('#manage_state_xid').val(manageStateXid);
    });

    $('#edit_location').validate({
        rules: {
            location_name: { required: true },
            time_hours: { required: true, digits: true },
            quantity: { required: true, digits: true },
            time_interval: { required: true }
        },
        messages: {
            location_name: { required: "Please enter the location name." },
            time_hours: { required: "Please enter time hours.", digits: "Please enter a valid number for time hours." },
            quantity: { required: "Please enter quantity.", digits: "Please enter a valid number for quantity." },
            time_interval: { required: "Please select a time interval." }
        },
        errorClass: 'error-message',
        submitHandler: function(form) {
            var formData = new FormData(form);
            let base_url = url_path;
            $('#update_location').text('Please wait...');
            $('#update_location').attr('disabled', true);
            $.ajax({
                url: base_url + '/update_location',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(result) {
                    if (result.success) {
                        toastr.success('Location updated successfully');
                        setTimeout(function() {
                            window.location.href = base_url + "/manage_location";
                        }, 2000);
                    } else {
                        toastr.error(result.error || 'Something went wrong');
                    }
                    $('#update_location').attr('disabled', false);
                    $('#update_location').text('Save');
                },
                error: function(xhr, status, error) {
                    toastr.error('Something went wrong');
                    $('#update_location').attr('disabled', false);
                    $('#update_location').text('Save');
                }
            });
        }
    });
});


            </script>


@endsection
