@php
    use Modules\Depletion\Models\OutletDistributionCenterMapping;
    use Modules\Depletion\Models\ProductSupplierMapping;
@endphp

@extends('layouts.app')
@section('title', 'Depletion Assign Data')
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <form action="{{ route('depletion.assign.data.process', ['id' => $depletion_job->id]) }}" method="POST"
                style="width: 100%;" id="depletion_assign_form">
                @csrf
                <input type="hidden" name="form_values" id="form_values">
            </form>
            <div class="col-md-12 mt-4">
                <div class="card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <h5><a href="{{ route('depletion.index') }}">
                                << Back</a>
                        </h5>
                        <h5 class="mb-0">
                            Job No: <b>{{ $depletion_job->job_no }}</b> - Assign Data
                        </h5>
                        <button type="button" class="btn btn-primary" id="submit_all_button"
                            style="background-color: var(--Brand-1); border-color: var(--Brand-1);">
                            Save All
                        </button>
                    </div>
                </div>
            </div>
            @php
                $count = 1;
            @endphp
            @foreach ($depletion_details as $depletion_detail)
                <div class="col-md-12 mt-2">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            {{ $depletion_detail->market }} |
                            {{ $depletion_detail->rt_code }} |
                            {{ $depletion_detail->outlet }} |
                            @if (!empty($depletion_detail->channel))
                                {{ $depletion_detail->channel }} |
                            @endif
                            {{ $depletion_detail->chain }}
                        </div>
                        <div class="card-body">
                            <table class="table w-100">
                                <thead>
                                    <tr>
                                        <th>Product</th>
                                        <th>QTY</th>
                                        <th>Supllier</th>
                                        <th>Distribution Point</th>
                                        <th>ZAP Order No</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($depletion_detail->depletionJobDetailsProducts as $product_detail)
                                        @php
                                            $default_distribution_point = OutletDistributionCenterMapping::default_distribution_point(
                                                $depletion_detail->rt_code,
                                                $depletion_detail->outlet,
                                            );

                                            $default_supplier = ProductSupplierMapping::default_supplier(
                                                $product_detail->product_id,
                                            );
                                        @endphp

                                        <tr>
                                            <td>
                                                @if($product_detail->product)
                                                    {{ $product_detail->product->product_name }}
                                                @else
                                                    Product not found (ID: {{ $product_detail->product_id }})
                                                @endif
                                                <input type="hidden" name="product_detail_id"
                                                    value="{{ $product_detail->id }}">
                                            </td>
                                            <td>{{ number_format($product_detail->qty, 0) }}</td>
                                            <td>
                                                <div class="custom-select-wrapper">
                                                    <select
                                                        class="form-control custom-select supplier_input"
                                                        name="supplier_id"
                                                        style="width: 100%;"
                                                        {{ $product_detail->qty == 0 ? 'disabled' : '' }}>
                                                        <option value="" disabled>Please Select</option>
                                                        @foreach ($suppliers as $supplier)
                                                            <option value="{{ $supplier->id }}"
                                                                {{ $product_detail->supplier_id == $supplier->id || $default_supplier == $supplier->id ? 'selected' : '' }}>
                                                                {{ $supplier->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <div class="custom-arrow">
                                                        <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M1 1.5L6 6.5L11 1.5" stroke="#495057" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>
                                                    </div>
                                                    <div class="search-container" style="display: none;">
                                                        <input type="text" class="search-input" placeholder="Search suppliers...">
                                                        <div class="search-clear" style="display: none;">×</div>
                                                    </div>
                                                </div>

                                            </td>
                                            <td>
                                                <div class="custom-select-wrapper">
                                                    <select class="form-control custom-select distribution_center_input"
                                                        name="distribution_center_id"
                                                        style="width: 100%;"
                                                        {{ $product_detail->qty == 0 ? 'disabled' : '' }}>
                                                        <option value="" disabled>Please Select</option>
                                                        @foreach ($distribution_centers as $distribution_center)
                                                            <option value="{{ $distribution_center->id }}"
                                                                {{ $product_detail->distribution_center_id == $distribution_center->id || $default_distribution_point == $distribution_center->id ? 'selected' : '' }}>
                                                                {{ $distribution_center->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <div class="custom-arrow">
                                                        <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M1 1.5L6 6.5L11 1.5" stroke="#495057" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>
                                                    </div>
                                                </div>
                                                
                                            </td>
                                            <td>
                                                <input type="text" name="zap_order_number"
                                                    class="form-control zap_order_number_input"
                                                    value="{{ $product_detail->zap_order_number ?? '' }}"
                                                    placeholder="Enter ZAP Order No" maxlength="20" oninput="validateTextAndNumber(this)">
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tr>
                                    <td colspan="5">
                                        <button type="button" class="btn btn-primary mr-3 submit_button"
                                            style="background-color: var(--Brand-1); border-color: var(--Brand-1); float: right; margin-bottom: -25px;">Save</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                @php
                    $count++;
                @endphp
            @endforeach
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {

            var is_changing = false;

            // Remove any existing Select2 initializations
            if ($.fn.select2) {
                $('.select2').select2('destroy');
            }

            $('#submit_all_button').click(function() {

                var all_valid = true;
                var form_values = [];

                $('tr').each(function(index) {
                    var product_detail_id = $(this).find('input[name="product_detail_id"]')
                        .val();
                    var supplier_id = $(this).find('select[name="supplier_id"]')
                        .val();
                    var distribution_center_id = $(this).find(
                            'select[name="distribution_center_id"]')
                        .val();
                    var zap_order_number = $(this).find('input[name="zap_order_number"]').val();

                    if (product_detail_id) {
                        console.log(`Row ${index + 1}:`, {
                            product_detail_id,
                            supplier_id,
                            distribution_center_id,
                            zap_order_number: zap_order_number

                        });

                        if (product_detail_id && supplier_id && distribution_center_id) {
                            form_values.push({
                                product_detail_id: product_detail_id,
                                supplier_id: supplier_id,
                                distribution_center_id: distribution_center_id,
                                zap_order_number: zap_order_number

                            });
                        } else {
                            all_valid = false;
                            form_values = [];
                            return false;
                        }
                    }
                });

                if (!all_valid) {
                    Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: "Please fill all required fields"
                    });
                    return;
                }

                $('#form_values').val(JSON.stringify(form_values));
                $('#depletion_assign_form').submit();
            });

            $('.submit_button').click(function() {

                var all_valid = true;
                var form_values = [];
                var table = $(this).closest('table');

                table.find('tbody tr').each(function(index) {
                    var product_detail_id = $(this).find('input[name="product_detail_id"]')
                        .val();
                    var supplier_id = $(this).find('select[name="supplier_id"]')
                        .val();
                    var distribution_center_id = $(this).find(
                            'select[name="distribution_center_id"]')
                        .val();
                    var zap_order_number = $(this).find('input[name="zap_order_number"]').val();
                    if (product_detail_id) {


                        console.log(`Row ${index + 1}:`, {
                            product_detail_id,
                            supplier_id,
                            distribution_center_id
                        });

                        if (supplier_id && distribution_center_id) {
                            form_values.push({
                                product_detail_id: product_detail_id,
                                supplier_id: supplier_id,
                                distribution_center_id: distribution_center_id,
                                zap_order_number: zap_order_number

                            });
                        } else {
                            all_valid = false;
                            form_values = [];
                            return false;
                        }
                    }
                });

                if (!all_valid) {
                    Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: "Please fill all required fields"
                    });
                    return;
                }

                $('#form_values').val(JSON.stringify(form_values));
                $('#depletion_assign_form').submit();
            });

            $('.supplier_input').change(function() {

                if (is_changing) return;

                var selected_supplier = $(this).val();

                if (selected_supplier) {

                    var current_row = $(this).closest('tr');

                    var product_name = current_row.find('td:first')
                        .text().trim();

                    is_changing = true;

                    // Apply the selected supplier to ALL instances of the same product across all outlets
                    $('.supplier_input').each(function() {

                        var product_row = $(this).closest('tr');
                        var row_product_name = product_row.find('td:first').text().trim();

                        // Update all instances of the same product that are not disabled
                        if (row_product_name === product_name && !$(this).is(':disabled')) {
                            $(this).val(selected_supplier);
                        }
                    });

                    is_changing = false;
                }
            });

            $('.distribution_center_input').change(function() {

                if (is_changing) return;

                var selected_value = $(this).val();

                if (selected_value) {
                    is_changing = true;
                    
                    var table = $(this).closest('table');
                    
                    // Apply the selected distribution center to all products in the same depletion detail (same outlet/table)
                    table.find('.distribution_center_input').each(function() {
                        // Only update if the field is not disabled
                        if (!$(this).is(':disabled')) {
                            $(this).val(selected_value);
                        }
                    });

                    is_changing = false;
                }
            });


        });

        document.addEventListener('DOMContentLoaded', function() {
            var alerts = document.querySelectorAll('.alert-dismissible');

            setTimeout(function() {
                alerts.forEach(function(alert) {
                    alert.classList.add('fade-out');
                    alert.addEventListener('transitionend', function() {
                        alert.remove();
                    });
                });
            }, 5000);
        });

        var style = document.createElement('style');
        style.innerHTML = `
          .fade-out {
              opacity: 0;
              transition: opacity 1s ease-out;
          }
      `;
        document.head.appendChild(style);
    </script>
    <style>
        /* Custom select styles */
        .custom-select-wrapper {
            position: relative;
            width: 100%;
            font-family: inter, sans-serif;
        }
        
        .custom-select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 100%;
            height: 38px;
            padding: 8px 0 4px 0;
            font-family: inter, sans-serif;
            font-size: 0.8rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: transparent;
            background-image: none;
            border: none;
            border-bottom: 1px solid #dee2e6;
            border-radius: 0;
            transition: border-color 0.15s ease-in-out;
            padding-right: 30px;
            padding-left: 8px;
            cursor: pointer;
        }
        
        .custom-select:focus {
            border-bottom-color: #80bdff;
            outline: 0;
            box-shadow: none;
        }
        
        .custom-arrow {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 100%;
        }
        
        /* For IE11 */
        .custom-select::-ms-expand {
            display: none;
        }
        
        /* Ensure dropdown options maintain consistent styling */
        .custom-select option {
            font-family: inter, sans-serif;
            font-size: 0.8rem;
            padding: 0.8rem;
            background-color: #fff;
            color: #212529;
        }
        
        /* Maintain original form control styles */
        .form-control {
            font-family: inter, sans-serif;
            font-size: 0.8rem;
            line-height: 1.5;
            color: #495057;
        }
    </style>
@endpush