@extends('layout.admin')

@section('styles')

@endsection
<style>
    .w-px-50{
     width:70px;
     height:70px;
    }
    .yes-no-toggle-group {
  display: inline-flex;
  gap: 0;
}

.yes-no-toggle-group input[type="radio"] {
  display: none;
}

.yes-no-toggle-group label {
  padding: 6px 20px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: #f8f9fa;
  margin-right: 5px;
  border-radius: 4px;
  color: #000;
}

/* 🟢 This is the magic: style the LABEL if it HAS a checked input inside */
.yes-no-toggle-group label:has(input[type="radio"]:checked) {
  color: #fff;
  background-color: #696cff;
  border-color: #696cff;
}


    .upload-bg-color{
        background-color:#F9F9F9;
        border: 1px solid gray;
        padding:10px;
        border-radius:20px;
    }

</style>
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        @if(session('success'))
            <div id="success" class="alert alert-primary alert-dismissible" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if(session('error'))
            <div id="error" class="alert alert-danger alert-dismissible" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <h4 class="py-3 mb-2">
            <span class="text-muted fw-light">Fare /</span> List
        </h4>
        <div class="row mb-2">
            <div class="col-lg-12">
                <a href="{{ route('createFare') }}" class="btn btn-primary float-end mt-4 ms-2">Add Fare</a>
                <!-- <a  class="btn btn-success text-white ms-2 float-end mt-4" id="export-btn"  onclick="exportCsv()">Export</a> -->
                 <!-- File Input -->
                 <a  class="btn btn-success text-white ms-2 float-end mt-4" id="export-btn"  onclick="exportSampleCsv()">Sample Feed</a>
                  <div class="ms-2 float-end mt-4">
                      <input type="file" id="csvFileInput" accept=".csv" class="form-control w-auto d-inline-block" />
                      <!-- Import Button -->
                      <button class="btn btn-warning  text-white ms-2" onclick="importFares()">Import Fares</button>
                  </div>

            </div>
        </div>
        <div class="card p-3">
            <div class="table-responsive text-nowrap">
                <table width="100%" class="table table-striped table-bordered table-hover" id="Country_table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Airline</th>
                        <th>Origin</th>
                        <th>Destination</th>
                        <th>Price Type</th>
                        <th>Price</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody class="table-border-bottom-0">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('#Country_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('listFare') }}",
            pageLength: 100,
            lengthMenu: [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
            columns: [
                { data: 'id', name: 'fares.id' },
                { data: 'airline_title', name: 'airlines.title' },
                { data: 'origin', name: 'fares.origin' },
                { data: 'destination', name: 'fares.destination' },
                {
                    data: 'fare_price_type',
                    name: 'fares.fare_price_type',
                    orderable: false,
                    render: function(data, type, row) {
                        return `
                            <div class="yes-no-toggle-group">
                                <label>
                                    <input type="radio" name="fare_price_type_${row.id}" value="1" ${data == 1 ? 'checked' : ''} data-id="${row.id}" data-field="fare_price_type" class="fare-change-radio"> 
                                    <span>Economy</span>
                                </label>
                                <label>
                                    <input type="radio" name="fare_price_type_${row.id}" value="0" ${data == 0 ? 'checked' : ''} data-id="${row.id}" data-field="fare_price_type" class="fare-change-radio"><span> Business</span>
                                </label>
                            </div>`;
                    }
                },
                { data: 'price', name: 'fares.price' },
                {
                    data: 'status',
                    name: 'fares.status',
                    orderable: false,
                  render: function(data, type, row) {
                    return `
                        <div class="yes-no-toggle-group">
                            <label>
                                <input type="radio" name="fare_status_${row.id}" value="1" ${data == 1 ? 'checked' : ''} data-id="${row.id}" data-field="status" class="fare-change-radio">
                                <span>Yes</span>
                            </label>
                            <label>
                                <input type="radio" name="fare_status_${row.id}" value="0" ${data == 0 ? 'checked' : ''} data-id="${row.id}" data-field="status" class="fare-change-radio">
                                <span>No</span>
                            </label>
                        </div>`;
                }
                },
                {
                    data: 'id',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function(data) {
                        return `<a class="dropdown-item" href="/fare/edit/${data}"><i class="bx bx-edit-alt me-1"></i> Edit</a>`;
                    }
                }
            ]
        });

        // Delegated event listener for dynamic content
        $(document).on('change', '.fare-change-radio', function() {
            let field = $(this).data('field');
            let value = $(this).val();
            let fareId = $(this).data('id');

            Swal.fire({
                title: 'Are you sure?',
                text: `You want to change ${field.replace('_', ' ')}?`,
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        method: "POST",
                        url: "{{ route('FareChangeStatus') }}",
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            field: field,
                            value: value,
                            fare_id: fareId
                        },
                        success: function(response) {
                            notifyBlackToast(response.message);
                            $('#Country_table').DataTable().ajax.reload(null, false); // keep current page
                        }
                    });
                } else {
                    // If cancelled, revert the radio button to previous state
                    $('#Country_table').DataTable().ajax.reload(null, false);
                }
            });
        });
    });
</script>



    <script>
        setTimeout(function(){
            document.getElementById('success').style.display = 'none';
        }, 2000);

        setTimeout(function(){
            document.getElementById('error').style.display = 'none';
        }, 2000);
    </script>

    <script>
        function exportSampleCsv() {
            $.ajax({
                method: "GET",
                url: "{{ route('fareSampleExport') }}",
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                },
                success: function (response) {
                    if (response.status == 1) {
                        window.open(response.url, '_blank');
                    }
                }
            });
        }
    </script>
    <script>
    function importFares() {
        let fileInput = document.getElementById('csvFileInput');
        let file = fileInput.files[0];

        if (!file) {
            alert("Please select a CSV file first.");
            return;
        }

        let formData = new FormData();
        formData.append('file', file);
        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

        $.ajax({
            url: '{{ route("importFares") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                alert(response.message || "Import successful");
                fileInput.value = ''; // Clear selected file
                window.location.reload(); 
            },
            error: function (xhr) {
                alert(xhr.responseJSON.message || "Import failed");
            }
        });
    }
    </script>

       <script>
        var id = 0;
        function exportCsv(){
        search = $('input[type="search"]').val();
        $.ajax({
            method: "GET",
            url: "{{ route('fareExport') }}",
            // xhrFields: {
            //     responseType: 'blob' 
            // },
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                'search': search,
            },
            success: function (response) {
                // var a = document.createElement('a');
                // var url = window.URL.createObjectURL(response);
                // a.href = url;
                // a.download = 'customer.csv';
                // document.body.append(a);
                // a.click();
                // a.remove();
                // window.URL.revokeObjectURL(url);
                if(response.status == 1){
                 window.open(response.url,'_blank');
                }
            }
        });
    }</script>
@endsection