@extends('admin.layouts.master')
@section('title', ($pageTitle ?? 'Job Card') . ' | Vogue Technics')

@section('styles')
    <style>
        .serviceInfoTable td {
            padding: 0.5rem;
            vertical-align: top;
        }

        .serviceInfoTable {
            table-layout: fixed;
            width: 100%;
        }

        .serviceInfoTable th,
        .serviceInfoTable td {
            white-space: normal;
        }

        .serviceInfoTable .select2-container {
            width: 100% !important;
        }

        .serviceInfoTable textarea.form-control {
            min-height: 38px;
            resize: vertical;
        }
    </style>
@endsection

@section('content')
    <section>
        <div class="row">
            <div class="col-12 col-xl-8">
                <form id="jobCardForm"
                    action="{{ $jobCard ? route('quotejobs.job-card.update', $jobCard) : route('quotejobs.job-card.store') }}"
                    method="POST">
                    @csrf
                    @if ($jobCard)
                        @method('PUT')
                    @endif

                    @include('admin.job_card_management.partials.basic-info')
                    @include('admin.job_card_management.partials.complain-info')
                    @include('admin.job_card_management.partials.service-info')

                    <div class="row mt-4">
                        <div class="col-12 text-end">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">
                                {{ $jobCard ? 'Update Job Card' : 'Create Job Card' }}
                            </button>
                            <a href="{{ route('quotejobs.job-card.index') }}" class="btn btn-label-secondary ms-auto">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-12 col-xl-4 mt-4 mt-xl-0">
                @include('admin.job_card_management.partials.vehicle-info')
            </div>
        </div>

        <div class="modal fade" id="partModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modelHeading">Add Part</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ route('parts.store') }}" method="POST" class="ajax-form">
                        <div class="modal-body">
                            @csrf
                            <div class="row g-3">
                                <div class="col-12">
                                    <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control" placeholder="Enter Name" required />
                                </div>

                                <div class="col-12">
                                    <label for="category" class="form-label">Category</label>
                                    <select name="category" id="category" class="form-control select2" data-placeholder="Select Category">
                                        <option value="">Select Category</option>
                                        <option value="ancillaries">Ancillaries</option>
                                        <option value="consumeables">Consumeables</option>
                                        <option value="cylinder_head">Cylinder Head</option>
                                        <option value="driveline">Driveline</option>
                                        <option value="engine">Engine</option>
                                        <option value="gearboxes">Gearboxes</option>
                                        <option value="engine_component">Other</option>
                                    </select>
                                </div>

                                <div class="col-sm-6 p-2">
                                    <label class="switch">
                                        <input type="checkbox" class="switch-input" name="is_active" value="1" />
                                        <span class="switch-toggle-slider">
                                            <span class="switch-on">
                                                <i class="icon-base ti tabler-check"></i>
                                            </span>
                                            <span class="switch-off">
                                                <i class="icon-base ti tabler-x"></i>
                                            </span>
                                        </span>
                                        <span class="switch-label">Status</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save Part</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            const partOptionsUrl = @json(route('parts.options'));
            function initializeCategorySelect() {
                const $select = $('#category');

                if ($select.hasClass('select2-hidden-accessible')) {
                    $select.select2('destroy');
                }

                $select.select2({
                    placeholder: $select.data('placeholder') || 'Select Category',
                    dropdownParent: $('#partModal'),
                    width: '100%'
                });
            }

            function preloadPartOptions($select) {
                if (!$select.length) {
                    return;
                }

                $.ajax({
                    url: partOptionsUrl,
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        q: '',
                        page: 1,
                        selected_ids: [$select.val()].filter(Boolean)
                    },
                    success: function(data) {
                        const currentValue = $select.val();

                        (data.results || []).forEach(function(item) {
                            if ($select.find('option[value="' + item.id + '"]').length) {
                                return;
                            }

                            const option = new Option(item.text, item.id, false, false);
                            $select.append(option);
                        });

                        if (currentValue) {
                            $select.val(currentValue).trigger('change.select2');
                        }
                    }
                });
            }

            function initializePartSelect($select) {
                if (!$select.length) {
                    return;
                }

                if ($select.hasClass('select2-hidden-accessible')) {
                    $select.select2('destroy');
                }

                $select.select2({
                    placeholder: $select.data('placeholder') || 'Select Part',
                    allowClear: Boolean($select.data('allow-clear')),
                    dropdownParent: $('body'),
                    width: '100%',
                    ajax: {
                        url: partOptionsUrl,
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term || '',
                                page: params.page || 1
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: data.results || [],
                                pagination: data.pagination || {
                                    more: false
                                }
                            };
                        },
                        cache: true
                    }
                }).on('select2:open', function() {
                    $('body').css('overflow', 'hidden');
                }).on('select2:close', function() {
                    $('body').css('overflow', '');
                });

                preloadPartOptions($select);
            }

            function initializeSelect2(scope) {
                $(scope).find('.service-part-select').each(function() {
                    initializePartSelect($(this));
                });
            }

            function calculateRowTotal($row) {
                const qty = parseFloat($row.find('.service-qty').val()) || 0;
                const amount = parseFloat($row.find('.service-amount').val()) || 0;
                const total = (qty * amount).toFixed(2);

                $row.find('.service-total').val(total);
            }

            function calculateGrandTotals() {
                let subTotal = 0;

                $('#serviceRowsBody .service-total').each(function() {
                    subTotal += parseFloat($(this).val()) || 0;
                });

                // const vat = parseFloat($('#vat').val()) || 0;
                // const total = subTotal + vat;
                const total = subTotal;

                $('#sub_total').val(subTotal.toFixed(2));
                $('#total').val(total.toFixed(2));
            }

            function bindRowCalculations() {
                $('#serviceRowsBody').on('input', '.service-qty, .service-amount', function() {
                    const $row = $(this).closest('.serviceRow');
                    calculateRowTotal($row);
                    calculateGrandTotals();
                });
            }

            $('#addServiceRow').on('click', function() {
                const templateHtml = $('#serviceRowTemplate').html();
                const $row = $(templateHtml);

                $('#serviceRowsBody').append($row);
                initializeSelect2($row);
            });

            $('#serviceRowsBody').on('click', '.removeServiceRow', function() {
                if ($('#serviceRowsBody .serviceRow').length === 1) {
                    $(this).closest('.serviceRow').find('input, textarea').val('');
                    $(this).closest('.serviceRow').find('select').val('').trigger('change');
                    calculateRowTotal($(this).closest('.serviceRow'));
                    calculateGrandTotals();
                    return;
                }

                $(this).closest('.serviceRow').remove();
                calculateGrandTotals();
            });

            // $('#vat').on('input', function() {
            //     calculateGrandTotals();
            // });

            $(document).on('ajax-form:success', function(event, form, response) {
                if (!$(form).closest('#partModal').length || !response?.data?.id) {
                    return;
                }

                $('#serviceRowsBody .service-part-select').each(function() {
                    const $select = $(this);

                    if ($select.find('option[value="' + response.data.id + '"]').length) {
                        return;
                    }

                    const newOption = new Option(response.data.text, response.data.id, false, false);
                    $select.append(newOption);
                });
            });

            $('#partModal').on('shown.bs.modal', function() {
                $('body').css('overflow', 'hidden');
            }).on('hidden.bs.modal', function() {
                $('body').css('overflow', '');
            });

            initializeCategorySelect();
            initializeSelect2(document);
            bindRowCalculations();

            $('#serviceRowsBody .serviceRow').each(function() {
                calculateRowTotal($(this));
            });

            calculateGrandTotals();
        });
    </script>
@endsection