@extends('layouts.master')

@push('css')
    <link rel="stylesheet" href="{{ asset('css/supplier-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="sup-create-page">

    {{-- Breadcrumb --}}
    <div class="az-content-breadcrumb mb-2">
        <span><a href="{{ route('supplier.list') }}" class="text-muted text-decoration-none">Supplier</a></span>
        <span>Add Supplier</span>
    </div>

    {{-- Page Header --}}
    <div class="sup-page-header">
        <div class="sup-header-title">
            <div class="sup-header-icon">
                <i class="fa fa-truck-loading"></i>
            </div>
            <div class="sup-header-text">
                <h2>Add Supplier (نیا سپلائر / کھاتہ)</h2>
                <div class="sup-subtitle">
                    <span>مال سپلائی کرنے والے کا نیا کھاتہ اور بنیادی معلومات درج کریں</span>
                </div>
            </div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('supplier.list') }}" class="btn btn-outline-secondary px-3">
                <i class="fa fa-arrow-left me-1"></i> Back to Supplier
            </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 Supplier
            </button>
        </div>
    </div>

    {{-- Validation Errors --}}
    @if (isset($errors) && count($errors) > 0)
        <div class="alert alert-danger sup-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="sup-card">
        <form method="post" id="myForm" action="{{ route('supplier.store') }}">
            @csrf

            {{-- ════════ SECTION 1: BASIC SUPPLIER INFORMATION ════════ --}}
            <div class="sup-section">
                <div class="sup-section-header">
                    <h5 class="sup-section-title">
                        <span class="sup-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="sup-form-group">
                            <label for="opening_date">
                                <span>Opening Date <span class="text-danger">*</span></span>
                                <span class="sup-label-urdu">تاریخ افتتاح</span>
                            </label>
                            <div class="sup-input-group">
                                <i class="fa fa-calendar-alt sup-input-icon"></i>
                                <input type="text" id="opening_date" name="opening_date"
                                    class="sup-form-control fc-datepicker" placeholder="YYYY-MM-DD"
                                    value="{{ old('opening_date') }}" readonly required />
                            </div>
                        </div>
                    </div>

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

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

                <div class="row">
                    {{-- City --}}
                    <div class="col-lg-4 col-md-6">
                        <div class="sup-form-group">
                            <label for="city">
                                <span>City (شہر)</span>
                                <span class="sup-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>

                    {{-- Contact Person --}}
                    <div class="col-lg-4 col-md-6">
                        <div class="sup-form-group">
                            <label for="contact_person">
                                <span>Contact Person</span>
                                <span class="sup-label-urdu">رابطہ کار شخص</span>
                            </label>
                            <div class="sup-input-group">
                                <i class="fa fa-user-tie sup-input-icon"></i>
                                <input type="text" id="contact_person" name="contact_person" class="sup-form-control"
                                    placeholder="e.g. Manager / Munshi / Owner" value="{{ old('contact_person') }}" />
                            </div>
                        </div>
                    </div>

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

            {{-- ════════ SECTION 2: CONTACT & ONLINE PRESENCE ════════ --}}
            <div class="sup-section">
                <div class="sup-section-header">
                    <h5 class="sup-section-title">
                        <span class="sup-section-icon icon-green">
                            <i class="fa fa-phone-volume"></i>
                        </span>
                        Contact & Online Info (رابطے کی معلومات)
                    </h5>
                    <span class="badge bg-light text-secondary border px-2 py-1">موبائل، فون و ای میل</span>
                </div>

                <div class="row">
                    {{-- Phone 1 --}}
                    <div class="col-lg-3 col-md-6">
                        <div class="sup-form-group">
                            <label for="phone_1">
                                <span>Phone 1 (Primary) <span class="text-danger">*</span></span>
                                <span class="sup-label-urdu">پرائمری فون نمبر</span>
                            </label>
                            <div class="sup-input-group">
                                <i class="fa fa-mobile-alt sup-input-icon"></i>
                                <input type="text" id="phone_1" name="phone_1" class="sup-form-control"
                                    placeholder="03001234567" value="{{ old('phone_1') }}" />
                            </div>
                        </div>
                    </div>

                    {{-- Phone 2 --}}
                    <div class="col-lg-3 col-md-6">
                        <div class="sup-form-group">
                            <label for="phone_2">
                                <span>Phone 2 (Secondary / WhatsApp)</span>
                                <span class="sup-label-urdu">دیگر فون / واٹس ایپ</span>
                            </label>
                            <div class="sup-input-group">
                                <i class="fab fa-whatsapp sup-input-icon text-success"></i>
                                <input type="text" id="phone_2" name="phone_2" class="sup-form-control"
                                    placeholder="Secondary phone" value="{{ old('phone_2') }}" />
                            </div>
                        </div>
                    </div>

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

                    {{-- Website --}}
                    <div class="col-lg-3 col-md-6">
                        <div class="sup-form-group">
                            <label for="website">
                                <span>Website / Web Link</span>
                                <span class="sup-label-urdu">ویب سائٹ</span>
                            </label>
                            <div class="sup-input-group">
                                <i class="fa fa-globe sup-input-icon"></i>
                                <input type="text" id="website" name="website" class="sup-form-control"
                                    placeholder="https://..." value="{{ old('website') }}" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ════════ SECTION 3: ADDRESS DETAILS ════════ --}}
            <div class="sup-section">
                <div class="sup-section-header">
                    <h5 class="sup-section-title">
                        <span class="sup-section-icon icon-amber">
                            <i class="fa fa-map-marked-alt"></i>
                        </span>
                        Address Details (سپلائر کا پتہ)
                    </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="sup-form-group">
                            <label for="address">
                                <span>Address (English)</span>
                                <span class="text-muted small">انگریزی پتہ</span>
                            </label>
                            <div class="sup-input-group">
                                <i class="fa fa-map-marker-alt sup-input-icon"></i>
                                <input type="text" id="address" name="address" class="sup-form-control"
                                    placeholder="Office, Shop, Mandi or Farm address" value="{{ old('address') }}" />
                            </div>
                        </div>
                    </div>

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

            {{-- ════════ SECTION 4: OPENING BALANCE & ACCOUNTS ════════ --}}
            <div class="sup-section bg-light">
                <div class="sup-section-header">
                    <h5 class="sup-section-title">
                        <span class="sup-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">Payable to Suppliers</span>
                </div>

                <div class="row g-3">
                    {{-- Opening Balance Debit --}}
                    <div class="col-md-6">
                        <div class="sup-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="sup-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="blance_dr"
                                    id="blance_dr" class="sup-form-control border-start-0 ps-2 fw-bold text-danger"
                                    placeholder="0" value="{{ old('blance_dr') }}" />
                            </div>
                        </div>
                    </div>

                    {{-- Opening Balance Credit --}}
                    <div class="col-md-6">
                        <div class="sup-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="sup-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="blance_cr"
                                    id="blance_cr" class="sup-form-control border-start-0 ps-2 fw-bold text-success"
                                    placeholder="0" value="{{ old('blance_cr') }}" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ════════ ACTIONS FOOTER BAR ════════ --}}
            <div class="sup-footer-bar">
                <div class="d-flex align-items-center gap-2">
                    <a href="{{ route('supplier.list') }}" 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 Supplier)
                    </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 (!$("#opening_date").val()) {
            var today = new Date();
            var formattedDate = today.getFullYear() + '-' +
                ('0' + (today.getMonth() + 1)).slice(-2) + '-' +
                ('0' + today.getDate()).slice(-2);
            $("#opening_date").val(formattedDate);
        }

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

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