@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: #138fa7;
        --free: #fff;
        --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;
    }

    .form-control {
        padding-bottom: 8px;
    }

    input::placeholder,
    textarea::placeholder {
        color: #b6acac !important;
    }
</style>
@section('content')

<h5> <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
        <a href="{{ route('admin.gold_advance') }}">
            <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 d="M15 6l-6 6l6 6" />
            </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>
    <form action="{{ route('admin.save_gold_bond') }}" id="goldForm" method="POST">
        @csrf

        <input type="hidden" name="roi_id" value="{{ $bond->roi_id ?? '' }}">

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

            <div class="col-lg-4 mb-3">
                <label class="form-label mb-0">Bond Date &nbsp;<span class="text-danger">*</span></label>
                <input type="date" name="bond_date"
                    value="{{ old('bond_date', $added_bond->bond_date ?? now()->format('Y-m-d')) }}" class="form-control">
            </div>

            <div class="col-lg-4 mb-3">
                <label class="form-label mb-3">Bond Date in Alphabetic&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="alphabetic_date" class="form-control" placeholder="Enter Date"
                        value="{{ old('alphabetic_date', $added_bond->bond_date_text ?? '') }}" readonly>
            </div>
        </div>

        <div class="row">
            <div class="section-title mt-1">
                <span><i class="ti tabler-building me-1"></i> Personal Details</span>
            </div>

            <div class="col-lg-6 mb-2">
                <label class="form-label">Salutation&nbsp;<span class="text-danger">*</span>
                    <select type="text" name="salutation" class="form-select">
                        <option>Select</option>
                        <option value="Mr"
                            {{ old('salutation',$added_bond->salutation ?? '')=='Mr' ? 'selected':'' }}>
                            Mr.
                        </option>

                        <option value="Mrs"
                            {{ old('salutation',$added_bond->salutation ?? '')=='Mrs' ? 'selected':'' }}>
                            Mrs.
                        </option>

                        <option value="Ms"
                            {{ old('salutation',$added_bond->salutation ?? '')=='Ms' ? 'selected':'' }}>
                            Ms.
                        </option>
                    </select>
            </div>

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

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

            <div class="col-lg-6 mb-3">
                <label class="form-label">Address&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="address" class="form-control"
                        value="{{ old('address', $added_bond->address ?? $user->address1 ?? '') }}">
            </div>

        </div>
        <div class="row">
            <div class="section-title mt-1">
                <span><i class="ti tabler-building me-1"></i> Product Details</span>
            </div>


            <div class="col-lg-6 mb-2">
                <label class="form-label">Product Details&nbsp;<span class="text-danger">*</span>
                    <textarea type="text" rows="5" name="product_details" class="form-control"
                        placeholder="Enter details such as grams, Number of products, Name of Products"></textarea>
            </div>

            <div class="col-lg-6">
                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Total Grams&nbsp;<span class="text-danger">*</span>
                            <input type="text" name="total_grams" class="form-control" placeholder="Enter" value="10"
                                value="{{ old('total_grams', $added_bond->total_grams ?? '') }}">
                    </div>

                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Total Value&nbsp;<span class="text-danger">*</span>
                            <input type="text" name="total_value" class="form-control"
                                value="{{ old('total_value', $added_bond->total_value ?? '') }}">

                    </div>
                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Labour Charge %&nbsp;<span class="text-danger">*</span>
                            <input type="text" name="labour_percent" class="form-control"
                                value="{{ old('labour_percent', $added_bond->labour_percent ?? '') }}">
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Labour Charge Amount&nbsp;<span class="text-danger">*</span>
                            <input type="text" name="labour_amount" class="form-control" placeholder="Enter"
                                value="{{ old('labour_percent', $added_bond->labour_percent ?? '') }}">
                    </div>
                </div>



            </div>
            <div class="col-lg-4 mb-3">
                <label class="form-label">GST %&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="gst_percent" class="form-control" placeholder="Enter"
                        value="{{ old('gst_percent', $added_bond->gst_percent ?? '') }}">
            </div>
            <div class="col-lg-4 mb-3">
                <label class="form-label">GST(in Rs.)&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="gst_amount" class="form-control" placeholder="Enter"
                        value="{{ old('gst_amount', $added_bond->gst_amount ?? '') }}">
            </div>

            <div class="col-lg-4 mb-3">
                <label class="form-label">Subtotal&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="subtotal" class="form-control" placeholder="Enter"
                        value="{{ old('subtotal', $added_bond->subtotal ?? '') }}">
            </div>
            <div class="col-lg-4 mb-3">
                <label class="form-label">Loaded Fund&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="loaded_fund" class="form-control" placeholder="Enter"
                        value="{{ old('loaded_fund', $added_bond->loaded_fund ?? $bond->wallet_value ?? '') }}">
            </div>
            <div class="col-lg-4 mb-3">
                <label class="form-label">Loaded Date&nbsp;<span class="text-danger">*</span>
                    <input type="date" name="loaded_date" class="form-control"
                        value="{{ old('loaded_date', $added_bond->loaded_date ?? '') }}">
            </div>
            <div class="col-lg-4 mb-3">
                <label class="form-label">Remaining&nbsp;<span class="text-danger">*</span>
                    <input type="text" name="balance" class="form-control" placeholder="Enter"
                        value="{{ old('balance', $added_bond->balance ?? '') }}">
            </div>
        </div>
        <div class="d-flex justify-content-center">
            <button type="submit" id="submit_btn" class="btn btn-submit">
                Confirm
            </button>
        </div>
        <!-- <div class="d-flex justify-content-center">
            <a href="{{ route('admin.ipl_bond') }}" class="btn btn-submit">
                Confirm
            </a>
        </div> -->
    </form>
</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="alphabetic_date"]');

        // ✅ 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('goldForm').submit();
    });
</script>
@if(session('success'))
<script>
    setTimeout(function() {
        window.location.href = "{{ session('redirect_url') }}";
    }, 500);
</script>
@endif
@endsection

<!--<div class="section-title mt-1">-->
<!--    <span><i class="ti tabler-building me-1"></i> First Party</span>-->
<!--</div>-->
<!--<div class="col-lg-9 mt-1">-->
<!--    <div class="row">-->
<!--        <div class="col-lg-4 mb-2">-->
<!--            <label class="form-label">Company Name&nbsp;<span class="text-danger">*</span>-->
<!--                <input type="text" class="form-control" placeholder="Enter Company Name"-->
<!--                    value="M/s Madhura Gold International PVT LTD">-->
<!--        </div>-->
<!--        <div class="col-lg-4 mb-2">-->
<!--            <label class="form-label">CIN&nbsp;<span class="text-danger">*</span>-->
<!--                <input type="text" class="form-control" placeholder="U3110KPTC85927" value="U3110KPTC85927">-->
<!--        </div>-->
<!--        <div class="col-lg-4 mb-2">-->
<!--            <label class="form-label">PAN&nbsp;<span class="text-danger">*</span>-->
<!--                <input type="text" class="form-control" placeholder="CTFH00001F" value="CTFH00001F">-->
<!--        </div>-->
<!--        <div class="col-lg-4 mb-3">-->
<!--            <label class="form-label">GST&nbsp;<span class="text-danger">*</span>-->
<!--                <input type="text" class="form-control" placeholder="U3110KPTC85927" value="U3110KPTC85927">-->
<!--        </div>-->
<!--        <div class="col-lg-4 mb-3">-->
<!--            <label class="form-label">HALLMARK&nbsp;<span class="text-danger">*</span>-->
<!--                <input type="text" class="form-control" placeholder="HM-C3456788" value="HM-C3456788">-->
<!--        </div>-->
<!--        <div class="col-lg-4 mb-3">-->
<!--            <label class="form-label">Pincode&nbsp;<span class="text-danger">*</span>-->
<!--                <input type="text" class="form-control" placeholder="695024" value="695024">-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="col-lg-3 mb-3">-->
<!--    <label class="form-label">Address&nbsp;<span class="text-danger">*</span>-->
<!--        <textarea type="text" rows="4"-->
<!--            class="form-control">Ram Tower, TC-28/627(6)/83/1083,Sreekandeswaram, Pettah p.o, Trivandrum</textarea>-->

<!--</div>-->