@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>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="row">
            <div class="col-lg-6 mb-3">
                <label class="form-label">Date &nbsp;<span class="text-danger">*</span></label>
                <input type="date" name="date" class="form-control">
            </div>
            <div class="col-lg-6 mb-3">
                <label class="form-label">Place&nbsp;<span class="text-danger">*</span>
                    <input type="text" class="form-control" placeholder="Enter Place" value="Thiruvananthapuram">
            </div>
            <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>



        </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-9">
                <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>

        </div>
        <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 = "{{ route('bond') }}";

                    document.body.appendChild(iframe);

                    iframe.onload = function () {
                        iframe.contentWindow.focus();
                        iframe.contentWindow.print();
                    };
                }
            </script>
        </div>
    </div>


@endsection