@extends('layouts.master')

@push('css')
    <link rel="stylesheet" href="{{ asset('css/customer-create.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@section('content')
<div class="cust-create-page">

    {{-- Breadcrumb --}}
    <div class="az-content-breadcrumb mb-2">
        <span><a href="{{ url('customers') }}" class="text-muted text-decoration-none">Customers</a></span>
        <span>Add Customer</span>
    </div>

    {{-- Page Header --}}
    <div class="cust-page-header">
        <div class="cust-header-title">
            <div class="cust-header-icon">
                <i class="fa fa-user-plus"></i>
            </div>
            <div class="cust-header-text">
                <h2>Add Customer (نیا گاہک / کھاتہ)</h2>
                <div class="cust-subtitle">
                    <span>گاہک کی بنیادی معلومات اور کھاتہ رجسٹر کریں</span>
                </div>
            </div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ url('customers') }}" class="btn btn-outline-secondary px-3">
                <i class="fa fa-arrow-left me-1"></i> Back to List
            </a>
            <button type="button" class="btn btn-primary px-3 shadow-sm" onclick="document.getElementById('myForm').submit();">
                <i class="fa fa-save me-1"></i> Save Customer
            </button>
        </div>
    </div>

    {{-- Validation Errors --}}
    @if (isset($errors) && count($errors) > 0)
        <div class="alert alert-danger cust-alert alert-dismissible fade show" role="alert">
            <div class="d-flex align-items-center">
                <i class="fa fa-exclamation-triangle fa-2x me-3"></i>
                <div>
                    <h6 class="fw-bold mb-1">فارم میں درج ذیل غلطیاں موجود ہیں:</h6>
                    <ul class="mb-0 ps-3">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                <button type="button" class="close ms-auto" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    @endif

    {{-- Main Form Card --}}
    <div class="cust-card">
        <form method="post" id="myForm" enctype="multipart/form-data" action="{{ url('customers/store') }}">
            @csrf

            {{-- ════════ SECTION 1: BASIC INFORMATION ════════ --}}
            <div class="cust-section">
                <div class="cust-section-header">
                    <h5 class="cust-section-title">
                        <span class="cust-section-icon icon-blue">
                            <i class="fa fa-id-card"></i>
                        </span>
                        Basic Information (بنیادی تفصیلات)
                    </h5>
                    <span class="badge bg-light text-secondary border px-2 py-1">لازمی معلومات</span>
                </div>

                <div class="row">
                    {{-- Opening Date --}}
                    <div class="col-lg-3 col-md-6">
                        <div class="cust-form-group">
                            <label for="customer_ope_date">
                                <span>Opening Date <span class="text-danger">*</span></span>
                                <span class="cust-label-urdu">تاریخ افتتاح</span>
                            </label>
                            <div class="cust-input-group">
                                <i class="fa fa-calendar-alt cust-input-icon"></i>
                                <input type="text" id="customer_ope_date" name="customer_ope_date"
                                    class="cust-form-control fc-datepicker" placeholder="YYYY-MM-DD"
                                    value="{{ old('customer_ope_date') }}" readonly required />
                            </div>
                        </div>
                    </div>

                    {{-- Customer Name (English) --}}
                    <div class="col-lg-4 col-md-6">
                        <div class="cust-form-group">
                            <label for="customer_name">
                                <span>Customer Name (English) <span class="text-danger">*</span></span>
                                <span class="text-muted small">انگریزی نام</span>
                            </label>
                            <div class="cust-input-group">
                                <i class="fa fa-user cust-input-icon"></i>
                                <input type="text" id="customer_name" name="customer_name" class="cust-form-control"
                                    placeholder="Enter full name" value="{{ old('customer_name') }}" required autofocus />
                            </div>
                        </div>
                    </div>

                    {{-- Customer Name (Urdu) --}}
                    <div class="col-lg-5 col-md-12">
                        <div class="cust-form-group">
                            <label for="customer_name_urdu">
                                <span class="text-muted small">کھاتہ / گاہک کا نام (اردو)</span>
                                <span class="cust-label-urdu fw-bold">کھاتہ نام</span>
                            </label>
                            <div class="cust-input-group">
                                <input type="text" id="customer_name_urdu" name="customer_name_urdu"
                                    class="cust-form-control urdu-input" placeholder="اردو میں گاہک یا کھاتہ نام لکھیں"
                                    value="{{ old('customer_name_urdu') }}" />
                                <i class="fa fa-signature cust-input-icon icon-right"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    {{-- City --}}
                    <div class="col-lg-4 col-md-6">
                        <div class="cust-form-group">
                            <label for="city">
                                <span>City (شہر)</span>
                                <span class="cust-label-urdu">شہر منتخب کریں</span>
                            </label>
                            <select class="form-control select2" name="city" id="city">
                                <option value="">— Select City (شہر منتخب کریں) —</option>
                                @foreach ($cities as $city)
                                    <option value="{{ $city->id_city }}" {{ old('city') == $city->id_city ? 'selected' : '' }}>
                                        {{ $city->city_name }} | {{ $city->city_name_urdu }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- Customer Reference --}}
                    <div class="col-lg-4 col-md-6">
                        <div class="cust-form-group">
                            <label for="customer_reference">
                                <span>Reference (حوالہ)</span>
                                <span class="text-muted small">ذریعہ یا حوالہ</span>
                            </label>
                            <div class="cust-input-group">
                                <i class="fa fa-user-tag cust-input-icon"></i>
                                <input type="text" id="customer_reference" name="customer_reference" class="cust-form-control"
                                    placeholder="e.g. Haji Sahab / Broker" value="{{ old('customer_reference') }}">
                            </div>
                        </div>
                    </div>

                    {{-- Status --}}
                    <div class="col-lg-4 col-md-12">
                        <div class="cust-form-group">
                            <label for="customer_status">
                                <span>Account Status (کھاتہ حالت)</span>
                                <span class="cust-label-urdu">فعال / غیر فعال</span>
                            </label>
                            <select class="form-control cust-form-control" name="customer_status" id="customer_status">
                                <option value="0" {{ old('customer_status', '0') == '0' ? 'selected' : '' }}>
                                    Active (فعال کھاتہ)
                                </option>
                                <option value="1" {{ old('customer_status') == '1' ? 'selected' : '' }}>
                                    In Active (غیر فعال / معطل)
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ════════ SECTION 2: CONTACT DETAILS ════════ --}}
            <div class="cust-section">
                <div class="cust-section-header">
                    <h5 class="cust-section-title">
                        <span class="cust-section-icon icon-green">
                            <i class="fa fa-phone-alt"></i>
                        </span>
                        Contact Details (رابطے کی معلومات)
                    </h5>
                    <span class="badge bg-light text-secondary border px-2 py-1">موبائل اور ای میل</span>
                </div>

                <div class="row">
                    {{-- Primary Phone --}}
                    <div class="col-lg-4 col-md-6">
                        <div class="cust-form-group">
                            <label for="whatsapp_number">
                                <span>Contact Number <span class="text-danger">*</span></span>
                                <span class="cust-label-urdu">موبائل نمبر</span>
                            </label>
                            <div class="cust-input-group">
                                <i class="fa fa-mobile-alt cust-input-icon"></i>
                                <input type="text" id="whatsapp_number" class="cust-form-control" name="customer_phone"
                                    placeholder="03001234567" value="{{ old('customer_phone') }}">
                            </div>
                        </div>
                    </div>

                    {{-- Secondary Contact / WhatsApp --}}
                    <div class="col-lg-4 col-md-6">
                        <div class="cust-form-group">
                            <label for="customer_whatsapp">
                                <span>WhatsApp / PTCL / Other</span>
                                <span class="cust-label-urdu">واٹس ایپ / دیگر</span>
                            </label>
                            <div class="cust-input-group">
                                <i class="fab fa-whatsapp cust-input-icon text-success"></i>
                                <input type="text" id="customer_whatsapp" class="cust-form-control" name="customer_whatsapp"
                                    placeholder="WhatsApp or Office PTCL" value="{{ old('customer_whatsapp') }}">
                            </div>
                        </div>
                    </div>

                    {{-- Customer Email --}}
                    <div class="col-lg-4 col-md-12">
                        <div class="cust-form-group">
                            <label for="customer_email">
                                <span>Customer Email</span>
                                <span class="cust-label-urdu">ای میل پتہ</span>
                            </label>
                            <div class="cust-input-group">
                                <i class="fa fa-envelope cust-input-icon"></i>
                                <input type="email" id="customer_email" name="customer_email" class="cust-form-control"
                                    placeholder="customer@example.com" value="{{ old('customer_email') }}" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ════════ SECTION 3: ADDRESS & REMARKS ════════ --}}
            <div class="cust-section">
                <div class="cust-section-header">
                    <h5 class="cust-section-title">
                        <span class="cust-section-icon icon-amber">
                            <i class="fa fa-map-marked-alt"></i>
                        </span>
                        Address & Remarks (پتہ اور ریمارکس)
                    </h5>
                    <span class="badge bg-light text-secondary border px-2 py-1">مقام کی تفصیل</span>
                </div>

                <div class="row">
                    {{-- Address English --}}
                    <div class="col-lg-6 col-md-6">
                        <div class="cust-form-group">
                            <label for="customer_address">
                                <span>Customer Address (English)</span>
                                <span class="text-muted small">انگریزی پتہ</span>
                            </label>
                            <div class="cust-input-group">
                                <i class="fa fa-map-marker-alt cust-input-icon"></i>
                                <input type="text" id="customer_address" name="customer_address" class="cust-form-control"
                                    placeholder="Shop / House / Mandi location" value="{{ old('customer_address') }}" />
                            </div>
                        </div>
                    </div>

                    {{-- Address Urdu --}}
                    <div class="col-lg-6 col-md-6">
                        <div class="cust-form-group">
                            <label for="customer_address_urdu">
                                <span class="text-muted small">اردو پتہ</span>
                                <span class="cust-label-urdu fw-bold">گاہک کا پتہ (اردو)</span>
                            </label>
                            <div class="cust-input-group">
                                <input type="text" name="customer_address_urdu" id="customer_address_urdu"
                                    class="cust-form-control urdu-input" placeholder="دکان نمبر، مارکیٹ، منڈی وغیرہ"
                                    value="{{ old('customer_address_urdu') }}" />
                                <i class="fa fa-location-arrow cust-input-icon icon-right"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    {{-- Remarks English --}}
                    <div class="col-lg-6 col-md-6">
                        <div class="cust-form-group">
                            <label for="customer_remarks">
                                <span>Remarks (English)</span>
                                <span class="text-muted small">اضافی نوٹس</span>
                            </label>
                            <div class="cust-input-group">
                                <i class="fa fa-comment-dots cust-input-icon"></i>
                                <input type="text" id="customer_remarks" class="cust-form-control" name="customer_remarks"
                                    placeholder="Optional business notes..." value="{{ old('customer_remarks') }}">
                            </div>
                        </div>
                    </div>

                    {{-- Remarks Urdu --}}
                    <div class="col-lg-6 col-md-6">
                        <div class="cust-form-group">
                            <label for="customer_remarks_urdu">
                                <span class="text-muted small">اردو ریمارکس</span>
                                <span class="cust-label-urdu fw-bold">ریمارکس</span>
                            </label>
                            <div class="cust-input-group">
                                <input type="text" class="cust-form-control urdu-input" id="customer_remarks_urdu"
                                    name="customer_remarks_urdu" placeholder="کوئی خصوصی ہدایت یا تفصیل..."
                                    value="{{ old('customer_remarks_urdu') }}">
                                <i class="fa fa-pen-nib cust-input-icon icon-right"></i>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Customer Photo --}}
                <div class="row mt-2">
                    <div class="col-lg-6 col-md-12">
                        <div class="cust-form-group mb-0">
                            <label for="customer_image">
                                <span>Customer Photo / Document</span>
                                <span class="cust-label-urdu">گاہک کی تصویر / شناختی کارڈ</span>
                            </label>
                            <div class="cust-file-box">
                                <i class="fa fa-cloud-upload-alt text-primary fa-2x"></i>
                                <div class="flex-grow-1">
                                    <input type="file" id="customer_image" name="customer_image"
                                        class="form-control form-control-sm border-0 bg-transparent p-0"
                                        accept="image/*" />
                                    <small class="text-muted d-block mt-1">PNG, JPG یا JPEG فارمیٹ منتخب کریں</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ════════ SECTION 4: OPENING BALANCE & ACCOUNTS ════════ --}}
            <div class="cust-section bg-light">
                <div class="cust-section-header">
                    <h5 class="cust-section-title">
                        <span class="cust-section-icon icon-purple">
                            <i class="fa fa-calculator"></i>
                        </span>
                        Account & Opening Balance (ابتدائی بیلنس کی تفصیل)
                    </h5>
                    <span class="badge bg-white text-dark border px-2 py-1">لیجر کھاتہ</span>
                </div>

                <div class="row g-3">
                    {{-- Opening Balance Debit --}}
                    <div class="col-md-6">
                        <div class="cust-balance-card debit-card">
                            <div class="balance-card-title">
                                <span>
                                    <i class="fa fa-arrow-circle-up text-danger me-1"></i> Opening Balance Debit (Dr)
                                </span>
                                <span class="badge-debit">سابقہ بقایا رقم</span>
                            </div>
                            <small class="text-muted d-block mb-2">اگر گاہک کے ذمہ پچھلا بقایا واجب الادا ہو تو یہاں درج کریں</small>
                            <div class="cust-input-group">
                                <span class="input-group-text bg-white border-end-0 fw-bold text-danger">Rs.</span>
                                <input type="text" oninput="formatWithCommas(this)" name="customer_ope_bal_dr"
                                    id="customer_ope_bal_dr" class="cust-form-control border-start-0 ps-2 fw-bold text-danger"
                                    placeholder="0" value="{{ old('customer_ope_bal_dr') }}" />
                            </div>
                        </div>
                    </div>

                    {{-- Opening Balance Credit --}}
                    <div class="col-md-6">
                        <div class="cust-balance-card credit-card">
                            <div class="balance-card-title">
                                <span>
                                    <i class="fa fa-arrow-circle-down text-success me-1"></i> Opening Balance Credit (Cr)
                                </span>
                                <span class="badge-credit">سابقہ جمع رقم</span>
                            </div>
                            <small class="text-muted d-block mb-2">اگر گاہک کی طرف سے پیشگی ایڈوانس جمع ہو تو یہاں درج کریں</small>
                            <div class="cust-input-group">
                                <span class="input-group-text bg-white border-end-0 fw-bold text-success">Rs.</span>
                                <input type="text" oninput="formatWithCommas(this)" name="customer_ope_bal_cr"
                                    id="customer_ope_bal_cr" class="cust-form-control border-start-0 ps-2 fw-bold text-success"
                                    placeholder="0" value="{{ old('customer_ope_bal_cr') }}" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Hidden Dynamic Fields Containers (Preserved for compatibility) --}}
            <div class="customer_records d-none"></div>
            <div class="customer_records_dynamic"></div>

            {{-- ════════ ACTIONS FOOTER BAR ════════ --}}
            <div class="cust-footer-bar">
                <div class="d-flex align-items-center gap-2">
                    <a href="{{ url('customers') }}" class="btn btn-outline-danger px-4">
                        <i class="fa fa-times me-1"></i> منسوخ کریں (Cancel)
                    </a>
                    <button type="reset" class="btn btn-light px-3 border text-secondary">
                        <i class="fa fa-undo me-1"></i> ریسٹ (Reset)
                    </button>
                </div>
                <div>
                    <button type="submit" class="btn btn-primary btn-lg px-5 shadow-sm fw-bold">
                        <i class="fa fa-check-circle me-1"></i> گاہک محفوظ کریں (Save Customer)
                    </button>
                </div>
            </div>

        </form>
    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.addEventListener('keydown', function(event) {
            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
                event.preventDefault();
                const form = document.getElementById('myForm');
                if (form) {
                    form.submit();
                }
            }

            if (event.key === 'Enter' && event.target.tagName !== 'TEXTAREA') {
                event.preventDefault();
            }
        });
    });

    $(document).ready(function() {
        // Default Opening Date to Today if empty
        if (!$("#customer_ope_date").val()) {
            var today = new Date();
            var formattedDate = today.getFullYear() + '-' +
                ('0' + (today.getMonth() + 1)).slice(-2) + '-' +
                ('0' + today.getDate()).slice(-2);
            $("#customer_ope_date").val(formattedDate);
        }

        // Initialize datepicker
        $("#customer_ope_date").datepicker({
            dateFormat: "yy-mm-dd",
            showOtherMonths: true,
            selectOtherMonths: true
        });

        // Initialize Select2 for City
        $('#city').select2({
            width: '100%',
            placeholder: '— Select City (شہر منتخب کریں) —',
            allowClear: true
        });

        // Dynamic extra fields handlers (preserved)
        $('.extra-fields-customer').click(function() {
            $('.customer_records').clone().appendTo('.customer_records_dynamic');
            $('.customer_records_dynamic .customer_records').addClass('single remove');
            $('.single .extra-fields-customer').remove();
            $('.single').append('<a href="#" class="remove-field btn-remove-customer btn btn-danger">Remove Fields</a>');
            $('.customer_records_dynamic > .single').attr("class", "remove");

            $('.customer_records_dynamic input').each(function() {
                var count = 0;
                var fieldname = $(this).attr("name");
                $(this).attr('name', fieldname + count);
                count++;
            });
        });

        $(document).on('click', '.remove-field', function(e) {
            $(this).parent('.remove').remove();
            e.preventDefault();
        });

        // Country/City AJAX dropdown handler (preserved)
        $('#country-dropdown').on('change', function() {
            var country_id = this.value;
            $("#city-dropdown").html('');
            $.ajax({
                url: "{{ url('get-cities-by-country') }}",
                type: "POST",
                data: {
                    country_id: country_id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    $('#city-dropdown').html('<option value="">Select City</option>');
                    $.each(result.cities, function(key, value) {
                        $("#city-dropdown").append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                }
            });
        });

        // Customer duplicate check by phone (preserved)
        $("#phone0, #whatsapp_number").on("blur change", function() {
            let val = $(this).val();
            if (val && val.length >= 7) {
                $.ajax({
                    url: "{{ url('check_customer_number') }}/" + val,
                    type: "GET",
                    data: { number: val },
                    dataType: 'json',
                    success: function(result) {
                        if (result.getCell == true) {
                            alert('یہ فون نمبر پہلے سے سسٹم میں رجسٹرڈ ہے (Customer already exists)!');
                        }
                    }
                });
            }
        });
    });
</script>
@endpush