@extends('layouts.admin')
@section('title', 'Purchase | Mintavia Admin')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

    <Style>
        form .form-label {
            font-weight: 500;
            margin-bottom: 4px;
        }

        form .btn {
            white-space: nowrap;
        }

        form input,
        form select {
            padding: 8px;
        }

        @media (max-width: 768px) {

            .row .col-md-2,
            .row .col-md-3 {
                width: 100%;
                /* Mobile पर responsive alignment */
            }
        }

        .table-responsive {
            overflow-x: auto;
            white-space: nowrap;
        }

        #data_table th,
        #data_table td {
            white-space: nowrap;
            /* Columns wrap na ho */
        }
    </Style>
    <div class="row">
        <div class="col-12">
            <x-admin-notify></x-admin-notify>
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Tracking</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.tracking.create') }}">
                            <button class="btn btn-sm btn-block btn-flat btn-light rounded-0 shadow "><i
                                    class="fa fa-plus"></i> </button>
                        </a>
                    </div>
                </div>
                <div class="card-body">

                    <form method="GET" action="{{ route('admin.tracking.index-short') }}" id="filterForm">
                        <div class="row g-3 align-items-end">

                            <div class="col-md-2">
                                <label class="form-label mb-1">Type</label>
                                <select class="form-control form-control-sm" name="purchase_sale">
                                    <option value="">Select</option>
                                    <option value="purchase">Purchase</option>
                                    <option value="sale">Sale</option>
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label mb-1">From</label>
                                <input type="date" name="from_date" class="form-control form-control-sm"
                                    value="{{ request('from_date') }}">
                            </div>

                            <div class="col-md-2">
                                <label class="form-label mb-1">To</label>
                                <input type="date" name="to_date" class="form-control form-control-sm"
                                    value="{{ request('to_date') }}">
                            </div>

                            <div class="col-md-2">
                                <label class="form-label mb-1">Serial No.</label>
                                <input type="text" class="form-control form-control-sm" name="sold_sirl_number"
                                    value="{{ request('sold_sirl_number') }}" placeholder="Search Serial No...">
                            </div>

                            <div class="col-md-2">
                                <label class="form-label mb-1">Mobile No.</label>
                                <input type="text" class="form-control form-control-sm" name="mobile_no"
                                    placeholder="Search Mobile...">
                            </div>

                            <div class="col-md-2">
                                <label class="form-label mb-1">Status</label>
                                <select class="form-control form-control-sm" name="status">
                                    <option value="">Select</option>
                                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active
                                    </option>
                                    <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>
                                        Inactive</option>
                                    <option value="complete" {{ request('status') == 'complete' ? 'selected' : '' }}>
                                        complete</option>
                                </select>
                            </div>

                        </div>
                    </form>
                    <div class="table-responsive mt-2" style="max-height: 400px; overflow-y: auto; border: 1px solid #dee2e6;">
                        <table class="table table-striped table-bordered table-sm" id="data_table"
                            style="width: 100%; margin-bottom: 0;">
                            <thead>
                                <tr>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Date</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Bill No.</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Party Name</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Pur Bill NO.</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">S Name</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Sale Bill NO.
                                    </th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">C Name</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Mobile No</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Part Number</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Sold Serial
                                        Number</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Enquiry date</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Last Follow Up
                                        Date</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Next Follow Up
                                        Date</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Status</th>
                                    <th style="position: sticky; top: 0; background: #f8f9fa; z-index: 1;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($trackings as $tracking)
                                    <tr>
                                        <td>{{ $tracking->date }}</td>
                                        <td>{{ $tracking->bill_no }}</td>
                                        <td>{{ optional($tracking->party)->name ?? '--' }}</td>
                                        <td>{{ $tracking->purchase_bill_no ?? 'N/A' }}</td>
                                        <td>{{ optional($tracking->supplier)->name ?? '--' }}</td>
                                        <td>{{ $tracking->sale_bill_no ?? 'N/A' }}</td>
                                        <td>{{ optional($tracking->customer)->name ?? '--' }}</td>
                                        <td>{{ $tracking->mobile_no }}</td>
                                        <td>{{ $tracking->sale_part_no }}</td>
                                        <td>{{ optional($tracking->serial)->serial_number ?? '--' }}</td>
                                        <td>{{ $tracking->enquiry_date }}</td>
                                        <td>{{ $tracking->last_follow_up_date }}</td>
                                        <td>{{ $tracking->next_follow_up_date }}</td>
                                        <td>{{ $tracking->status }}</td>
                                        <td>
                                            <a href="{{ route('admin.tracking.edit', $tracking->id) }}"
                                                class="btn btn-sm btn-primary">
                                                <i class="bi bi-pencil-square"></i>
                                            </a>
                                            <form action="" method="POST" style="display:inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger"
                                                    onclick="return confirm('Are you sure?')">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                            <a href="{{ route('admin.tracking.tracking', $tracking->id) }}"
                                                class="btn btn-sm btn-success">
                                                <i class="bi bi-telephone-fill"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('plugins.Toastr', true)

@section('js')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    @if (session('tracking_saved'))
        <script>
            Swal.fire({
                title: 'Do you want to print?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Select an action',
                        html: `
                        <div style="margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;">
                            <button onclick="handleAction('preview')" class="swal2-confirm swal2-styled">👁️ Preview</button>
                            <button onclick="handleAction('print')" class="swal2-confirm swal2-styled">🖨️ Print</button>
                            <button onclick="handleAction('email')" class="swal2-confirm swal2-styled">📧 Email</button>
                            <button onclick="handleAction('whatsapp')" class="swal2-confirm swal2-styled">🟢 WhatsApp</button>
                            <button onclick="handleAction('excel')" class="swal2-confirm swal2-styled">📊 Excel</button>
                        </div>
                    `,
                        showConfirmButton: false,
                        allowOutsideClick: false
                    });
                }
            });

            function handleAction(action) {
                let url = "{{ route('admin.tracking.preview', app('request')->input('id')) }}"
                let AjaxDtata = {
                    "action": action,
                    "invoice_id": "{{ app('request')->input('id') }}",
                    "email": ""
                }
                switch (action) {
                    case 'preview':
                        window.open(url + "?action=preview", '_blank');
                        break;
                    case 'print':
                        window.open(url + "?action=print", '_blank');
                        break;
                    case 'email':
                        handleEmailAction(AjaxDtata);
                        break;
                    case 'whatsapp':
                        handleWhatsAppAction(AjaxDtata)
                        break;
                    case 'excel':
                        alert('Excel export coming soon.');
                        break;
                }
            }

            function handleEmailAction(AjaxDtata) {
                const customerEmail = "{{ app('request')->input('gmail_address') }}";
                AjaxDtata['email'] = customerEmail;
                if (!customerEmail) {
                    Swal.fire({
                        title: 'Enter Email Address',
                        input: 'email',
                        inputLabel: 'Customer Email',
                        inputPlaceholder: 'example@gmail.com',
                        showCancelButton: true,
                        confirmButtonText: 'Send Email',
                    }).then((result) => {
                        if (result.isConfirmed && result.value) {
                            AjaxDtata['email'] = result.value;
                            CallActionAjax(AjaxDtata);
                        }
                    });
                } else {
                    CallActionAjax(AjaxDtata);
                }
            }

            function handleWhatsAppAction(AjaxDtata) {
                Swal.fire({
                    title: 'WhatsApp Number Missing',
                    text: 'Enter number to send invoice via WhatsApp',
                    input: 'text',
                    inputLabel: 'Enter WhatsApp Number',
                    inputPlaceholder: 'e.g. 91XXXXXXXXXX',
                    showCancelButton: true,
                    confirmButtonText: 'Send',
                    cancelButtonText: 'Cancel',
                    inputValidator: (value) => {
                        if (!value || value.length < 10) {
                            return 'Please enter a valid number';
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        let number = result.value.replace(/\D/g, '');
                        if (number.length === 10) {
                            number = '91' + number;
                        }
                        AjaxDtata['number'] = number;
                        CallActionAjax(AjaxDtata);
                    }
                });
            }


            function CallActionAjax(data) {
                let url = "{{ route('admin.tracking.preview', app('request')->input('id')) }}"
                $.ajax({
                    url: url,
                    headers: {
                        "accept": "application/json",
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    type: "GET",
                    data: data,
                    success: function(response) {
                        if (response.status === 'success') {
                            if (data.action === 'email') {
                                Swal.fire({
                                    title: 'Success',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                });
                            } else if (data.action === 'whatsapp') {
                                Swal.fire({
                                    title: 'Success',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonText: 'OK',
                                    didClose: () => {
                                        window.open(response.data.whatsapp_url, '_blank');
                                    }
                                });
                            } else {
                                Swal.fire({
                                    title: 'Success',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                });
                            }
                        } else {
                            Swal.fire({
                                title: 'Error',
                                text: response.message,
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert(errorThrown);
                    }
                });

            }
        </script>
    @endif
    <script>
        $(document).ready(function() {
            $('#filterForm input, #filterForm select').on('keyup change', function() {
                var formData = $('#filterForm').serialize();

                $.ajax({
                    url: "{{ route('admin.tracking.index-short') }}",
                    type: 'GET',
                    data: formData,
                    success: function(response) {
                        const newTable = $(response).find('#data_table tbody').html();
                        $('#data_table tbody').html(newTable);
                    }
                });
            });
        });

        function filterData() {
            $("#serial_number_sale_filter_form").submit();
        }

        $(document).ready(function() {
            $('#global_search').on('keyup', function() {
                let value = $(this).val().toLowerCase();

                $('#data_table tbody tr').filter(function() {
                    $(this).toggle(
                        $(this).text().toLowerCase().indexOf(value) > -1
                    );
                });
            });

            $('#status_filter').val("{{ request('sold_status') }}");
            $('#status_filter').on('change', function() {
                filterData();
            });
        });
    </script>
@endsection