@extends('Admin.layout')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Lora&family=Yeseva+One&display=swap');

    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #0A1F44;
        --free: #ffc107;
        --captured: #2b2120;

        --form-bg: var(--brasillia-peach);
        --secondary-color: var(--hibiscus-love);
        --tertiary-color: var(--fine-ii);
        --quadrary-color: var(--afl);
        --bg-color: var(--mexican-sky);
        --text-color: var(--free);
        --header-color: var(--captured);
        --error-color: var(--hibiscus-love);
        --success-color: #73d12e;

        box-sizing: border-box;
    }


    .container {
        width: 400px;
        border-radius: 0.6em;
        padding: 20px;
        background-color: var(--form-bg) !important;
        margin: 20px auto;
    }

    .form {
        padding: 30px 40px;
    }

    .form h2 {
        text-align: center;
        margin: 0 0 20px;
    }

    .form-control {
        margin-bottom: 10px;
        padding-bottom: 20px;
        position: relative;
        color: var(--text-color) !important;

    }

    .form-label {
        color: White !important;
        display: block;
        margin-bottom: 5px;
    }

    .form-control {
        border-radius: 6px;
        background: var(--form-bg) !important;
        border: var(--quadrary-color) solid 2px !important;
        display: block;
        width: 100%;
        color: var(--text-color) !important;

    }

    .form-select {
        border-radius: 6px;
        background: var(--form-bg) !important;
        border: var(--quadrary-color) solid 2px !important;
        color: var(--text-color) !important;


    }

    .form-control input:focus {
        outline: 0;
        border-color: var(--tertiary-color);
    }

    .form-control.success input {
        border-color: var(--success-color);
    }

    .form-control.error input {
        border-color: var(--error-color);
    }

    .form-control small {
        color: var(--error-color);
        position: absolute;
        bottom: 0;
        left: 0;
        visibility: hidden;
    }

    .form-control.error small {
        visibility: visible;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:hover,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-text-fill-color: #ffc107 !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .btn-submit {
        background-color: #ffc107 !important;
        color: black !important;
    }

    .section-title {
        position: relative;
        margin: 25px 0 15px;
        text-align: center;
    }

    .section-title span {
        background: var(--form-bg);
        padding: 6px 20px;
        font-weight: 600;
        color: var(--text-color);
        letter-spacing: 1px;
        border-radius: 30px;
        border: 1px solid var(--quadrary-color);
        font-size: 14px;
        z-index: 1;
        position: relative;
    }

    .section-title::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--quadrary-color);
        z-index: 0;
    }
</style>
@section('content')

<h5><button type="button" class="btn btn-icon bg-white me-2 waves-effect waves-light"
        style="box-shadow: 0px 9px 12px -2px #66328E1F;">
<a href="{{ route('bond_unit_selection', ['block_id' => $block_id]) }}">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M15 6l-6 6l6 6"></path>
            </svg>
        </a>
    </button> Fillable Bond Details</h5>
<div class="container">
    <div class="text-end mb-2">
        <small style="color:#ff4d4f;">
            <span class="fw-bold">*</span> Indicates required fields
        </small>
    </div>
    <div class="section-title mt-1">
        <span><i class="ti tabler-crown me-1"></i> OG24 Bond Details</span>
    </div>
    <form action="{{route('submit_bond_details')}}" method="POST" id="bondForm">
        @csrf
        <input type="hidden" name="user_id" value="{{ $user_id }}">
        <input type="hidden" name="block_id" value="{{ $block_id }}">
        <div class="row">
            <div class="col-lg-4 mb-2">
                <label class="form-label">Registration ID&nbsp;<span class="text-danger">*</span>
                    <input type="text" class="form-control" value="{{ $user_id }}" readonly name="registration_id">

            </div>
            <div class="col-lg-4 mb-3">
                <label class="form-label">Bond Date &nbsp;<span class="text-danger">*</span></label>
                <input type="date" name="bond_date" class="form-control"
                    value="{{ old('bond_date', isset($bond) ? \Carbon\Carbon::parse($bond->bond_date)->format('Y-m-d') : '') }}">
                @error('bond_date')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
            <div class="col-lg-4 mb-3">
                <label class="form-label">Bond Date In Alphabet &nbsp;<span class="text-danger">*</span></label>
                <input type="text" name="bond_date_in_alphabet" class="form-control" placeholder="17"
                    value="{{ old('bond_date_in_alphabet', optional($bond)->bond_date_in_alphabet) }}">
            </div>



        </div>
        <div class="row">
            <div class="section-title mt-1">
                <span><i class="ti tabler-building me-1"></i> Second Party</span>
            </div>
            <div class="col-lg-4 mb-3">
                <label class="form-label">Salutation&nbsp;<span class="text-danger">*</span>
                    <select name="salutation" id="" class="form-control">
                        <!-- <option value="">Select Salutation</option> -->
                        <option value="Mr." {{ old('salutation', optional($bond)->salutation) == 'Mr.' ? 'selected' : '' }}>Mr.</option>
                        <option value="Mrs." {{ old('salutation', optional($bond)->salutation) == 'Mrs.' ? 'selected' : '' }}>Mrs.</option>
                        <option value="Ms." {{ old('salutation', optional($bond)->salutation) == 'Ms.' ? 'selected' : '' }}>Ms.</option>
                    </select>
            </div>

            <div class="col-lg-4 mb-2">
                <label class="form-label"> Name&nbsp;<span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control"
                    value="{{ old('name', $bond->name ?? $user->name ?? '') }}">
            </div>

            <div class="col-lg-4 mb-3">
                <label class="form-label">Pincode&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="pincode" class="form-control" placeholder="695024"
                        value="{{ old('pincode', $bond->pincode ?? $user->pincode ?? '') }}" maxlength="6">
            </div>

            <div class="col-lg-12 mb-3">
                <label class="form-label">
                    Address&nbsp;<span class="text-danger">*</span>
                </label>

                <textarea name="address" class="form-control" rows="3">{{ old('address', $bond->address ?? $user->address ?? '') }}</textarea>
            </div>


        </div>
        <div class="section-title mt-1">
            <span><i class="ti tabler-building me-1"></i> Unit Details</span>
        </div>
        <div class="row">
            <div class="col-lg-4 mb-2">
                <label class="form-label">Double Units&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="double_units" class="form-control" readonly
                        value="{{ old('double_units', $doubleUnits ?? 0) }}">
                    <!-- value="{{ old('double_units', $bond->double_units ?? $doubleUnits ?? 0) }}"> -->

            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Double Units * 8 Grms&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="double_units_8gm" class="form-control"
                        value="{{ old('double_units_8gm',  $doubleUnitsGrams ?? 0) }}">
                    <!-- value="{{ old('double_units_8gm', $bond->double_units_8gm ?? $doubleUnitsGrams ?? 0) }}"> -->

            </div>

            <div class="col-lg-4 mb-2">
                <label class="form-label">Single Gram Price&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="single_gram_price" class="form-control"
                        value="{{ old('single_gram_price',  $singleGramPrice ?? 0) }}">
                    <!-- value="{{ old('single_gram_price', $bond->single_gram_price ?? $singleGramPrice ?? 0) }}"> -->


            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Making Charge For Double Units&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="double_units_mc_value" class="form-control"
                        value="{{ old('double_units_mc_value', $doubleUnitsmakingCharge ?? 0) }}">
                    <!-- value="{{ old('double_units_mc_value', $bond->double_units_mc_value ?? $doubleUnitsmakingCharge ?? 0) }}"> -->

            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Total Price Including MC&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="total_price_with_mc" class="form-control"
                        value="{{ old('total_price_with_mc',  $totalPriceWithMC ?? 0) }}">
                    <!-- value="{{ old('total_price_with_mc', $bond->total_price_with_mc ?? $totalPriceWithMC ?? 0) }}"> -->


            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Total Price Including GST&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="total_price_with_gst" class="form-control"
                        value="{{ old('total_price_with_gst',  $totalPriceWithGST ?? 0) }}">

            </div>

            <div class="col-lg-4 mb-2">
                <label class="form-label">Given Amount&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="given_amount" class="form-control"
                        value="{{ old('given_amount', $givenAmount ?? 0) }}">

            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Amount(in figures)&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="amount_in_figures" class="form-control"
                        value="{{ old('amount_in_figures',  $amountInWords ?? '') }}">
            </div>

            <div class="col-lg-4 mb-2">
                <label class="form-label">Purchased Units&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="purchased_units" class="form-control"
                        value="{{ old('purchased_units', $totalUnits ?? 0) }}">

            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Total Grams&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="total_grams" class="form-control"
                        value="{{ old('total_grams', $totalGrams ?? 0) }}">

            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Amount Including MC&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="purchased_amount_with_mc" class="form-control"
                        value="{{ old('purchased_amount_with_mc', $PurchasedAmountWithMC ?? 0) }}">

            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Amount Including GST&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="purchased_amount_with_gst" class="form-control"
                        value="{{ old('purchased_amount_with_gst',  $PurchasedAmountWithGST ?? 0) }}">

            </div>

            <div class="col-lg-4 mb-2">
                <label class="form-label">Remaining Amount&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="remaining_amount" class="form-control"
                        value="{{ old('remaining_amount',  $remainingAmount ?? 0) }}">
            </div>


            <div class="col-lg-4 mb-2">
                <label class="form-label">Loaded Date&nbsp;<span class="text-danger">*</span>
                    <input type="date" name="loaded_date" class="form-control" value="{{$loadedDate }}">
            </div>

            <div class="col-lg-4 mb-2">
                <label class="form-label">Location&nbsp;<span class="text-danger">*</span>
                    <input type="text" placeholder="Trivandrum" name="location" class="form-control"
                        value="{{ old('location', optional($bond)->location) }}">
                    @error('location')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
            </div>

        </div>
        <div class="d-flex justify-content-center">
            <button type="submit" id="submit_btn" class="btn btn-submit">
                Confirm
            </button>
        </div>
    </form>
    <!-- <div class="d-flex justify-content-center">
                <button onclick="printBond()" class="btn btn-submit">
                    Proceed to Print
                </button>
                <script>
                    function printBond() {
                        let iframe = document.createElement('iframe');
                        iframe.style.position = 'absolute';
                        iframe.style.top = '-10000px';
                        iframe.style.left = '-10000px';
                        iframe.src = "";

                        document.body.appendChild(iframe);

                        iframe.onload = function() {
                            iframe.contentWindow.focus();
                            iframe.contentWindow.print();
                        };
                    }
                </script>
            </div> -->
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {

        function formatBondDate(date) {
            if (!date) return '';

            let d = new Date(date);

            let day = d.getDate();
            let month = d.toLocaleString('default', {
                month: 'long'
            });
            let year = d.getFullYear();

            function getSuffix(day) {
                if (day >= 11 && day <= 13) return 'th';
                switch (day % 10) {
                    case 1:
                        return 'st';
                    case 2:
                        return 'nd';
                    case 3:
                        return 'rd';
                    default:
                        return 'th';
                }
            }

            let suffix = getSuffix(day);

            return `${day}${suffix} day of ${month} ${year}`;
        }

        let bondDateInput = document.querySelector('input[name="bond_date"]');
        let alphabetInput = document.querySelector('input[name="bond_date_in_alphabet"]');

        // ✅ prevent null error
        if (bondDateInput && alphabetInput) {

            // On change
            bondDateInput.addEventListener('change', function() {
                alphabetInput.value = formatBondDate(this.value);
            });

            // On load
            if (bondDateInput.value && !alphabetInput.value) {
                alphabetInput.value = formatBondDate(bondDateInput.value);
            }
        }

    });
</script>
<script>
    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('bondForm').submit();
    });
</script>
@if(session('success'))
<script>
    setTimeout(function() {
        window.location.href = "{{ session('redirect_url') }}";
    }, 500);
</script>
@endif
@endsection