@extends('Admin.layout')

@section('content')

    <style>
        /* =========================================================
                                           PAGE
                                        ========================================================= */

        .gold-page-card {
            background: #19212c !important;
            border: 1px solid rgba(218, 184, 91, 0.30) !important;
            border-radius: 16px !important;
        }


        /* =========================================================
                                           HEADER
                                        ========================================================= */

        .gold-page-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 25px;
        }

        .gold-back-btn {
            width: 38px;
            height: 38px;
            padding: 0 !important;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            background: #252b31 !important;
            border: 1px solid rgba(218, 184, 91, 0.30) !important;
            color: #f0d37b !important;

            border-radius: 8px !important;
        }

        .gold-back-btn:hover {
            background: #303841 !important;
            color: #f5d77e !important;
        }

        .gold-back-btn i {
            font-size: 18px;
        }


        /* =========================================================
                                           TITLE
                                        ========================================================= */

        .gold-page-title {
            color: #f0d37b !important;
            font-size: 20px;
            font-weight: 700;
            margin: 0;
        }

        .gold-page-subtitle {
            color: #9fa7b3;
            font-size: 13px;
            margin-top: 3px;
        }


        /* =========================================================
                                           FORM SECTION
                                        ========================================================= */

        .gold-form-section {
            width: 100%;
            margin-left: 0;
            margin-right: auto;
        }


        /* =========================================================
                                           FORM LABEL
                                        ========================================================= */

        .gold-form-label {
            color: #d8dce3 !important;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 7px;
        }


        /* =========================================================
                                           FORM INPUT
                                        ========================================================= */

        .gold-form-control,
        .gold-form-select {

            width: 100%;

            background: #111820 !important;

            color: #e8eaf0 !important;

            border: 1px solid rgba(218, 184, 91, 0.25) !important;

            border-radius: 8px !important;

            min-height: 42px;

            font-size: 14px;
        }


        .gold-form-control::placeholder {
            color: #69717c !important;
        }


        .gold-form-control:focus,
        .gold-form-select:focus {

            background: #111820 !important;

            color: #ffffff !important;

            border-color: #f0d37b !important;

            box-shadow: 0 0 0 0.15rem rgba(240, 211, 123, 0.12) !important;

        }


        /* SELECT ARROW */

        .gold-form-select option {
            background: #19212c;
            color: #ffffff;
        }


        /* =========================================================
                                           INPUT GROUP
                                        ========================================================= */

        .gold-input-group .input-group-text {

            background: #252b31 !important;

            color: #f0d37b !important;

            border: 1px solid rgba(218, 184, 91, 0.25) !important;

            border-right: 0 !important;

            border-radius: 8px 0 0 8px !important;

            font-size: 14px;

            font-weight: 600;

        }

        .gold-input-group .gold-form-control {

            border-radius: 0 8px 8px 0 !important;

        }


        /* =========================================================
                                           HELP TEXT
                                        ========================================================= */

        .gold-help-text {
            color: #777f8b;
            font-size: 11px;
            margin-top: 5px;
        }


        /* =========================================================
                                           ACTIONS
                                        ========================================================= */

        .gold-actions {

            display: flex;

            justify-content: flex-end;

            gap: 10px;

            margin-top: 30px;

            padding-top: 20px;

            border-top: 1px solid rgba(218, 184, 91, 0.12);

        }


        .gold-cancel-btn {

            min-width: 110px;

            background: #252b31 !important;

            border: 1px solid #4b5158 !important;

            color: #d5d9df !important;

            border-radius: 8px !important;

            font-size: 13px;

            font-weight: 600;

        }


        .gold-cancel-btn:hover {

            background: #303841 !important;

            color: #ffffff !important;

        }


        .gold-save-btn {

            min-width: 130px;

            background: #f0cc68 !important;

            border: 1px solid #f0cc68 !important;

            color: #19212c !important;

            border-radius: 8px !important;

            font-size: 13px;

            font-weight: 600;

        }


        .gold-save-btn:hover {

            background: #f5d77e !important;

            border-color: #f5d77e !important;

            color: #19212c !important;

        }


        /* =========================================================
                                           MOBILE
                                        ========================================================= */

        @media (max-width: 576px) {

            .gold-page-card {
                padding: 16px !important;
                border-radius: 12px !important;
            }

            .gold-page-title {
                font-size: 18px;
            }

            .gold-page-header {
                margin-bottom: 20px;
            }

            .gold-actions {
                flex-direction: column-reverse;
            }

            .gold-cancel-btn,
            .gold-save-btn {
                width: 100%;
            }

        }
    </style>


    <div class="card gold-page-card p-3 p-md-4">


        <!-- HEADER -->

        <div class="gold-page-header">

            <a href="{{ route('gold_management') }}" class="btn gold-back-btn">

                <i class="ti ti-arrow-left"></i>

            </a>


            <div>

                <h5 class="gold-page-title">
                    Add Gold
                </h5>

                <div class="gold-page-subtitle">
                    Add gold purity, amount and weight details
                </div>

            </div>

        </div>


        <!-- FORM -->

        <div class="gold-form-section">

            <form action="{{ route('add_gold') }}" method="POST" id="goldForm">
                @csrf


                <div class="row g-3">
                    <!-- GRAM -->

                    <div class="col-12 col-md-6">

                        <label class="gold-form-label">
                            Gram
                            <span class="text-danger">*</span>
                        </label>

                        <div class="input-group gold-input-group">
                            <span class="input-group-text">
                                g
                            </span>

                            <input type="number" name="gram" class="form-control gold-form-control"
                                placeholder="Enter grams" min="0" step="0.001" value="{{ old('gram', '1') }}" readonly>

                        </div>
                    </div>
                    <!-- PURITY -->

                    <div class="col-12 col-md-6">

                        <label class="gold-form-label">
                            Purity
                            <span class="text-danger">*</span>
                        </label>


                        <div class="input-group gold-input-group">

                            <span class="input-group-text">
                                K
                            </span>

                            <input type="number" name="purity" class="form-control gold-form-control"
                                placeholder="Enter purity" min="0" value="{{ old('purity','22') }}" readonly>

                        </div>

                    </div>


                    <!-- AMOUNT -->

                    <div class="col-12 col-md-6">

                        <label class="gold-form-label">
                            Amount
                            <span class="text-danger">*</span>
                        </label>


                        <div class="input-group gold-input-group">

                            <span class="input-group-text">
                                ₹
                            </span>

                            <input type="number" name="amount" class="form-control gold-form-control"
                                placeholder="Enter amount" min="0" step="0.01" value="{{ old('amount') }}">

                        </div>

                    </div>
                    <div class="col-12 col-md-6">

                        <label class="gold-form-label">
                            Reduction Amount for next carat
                            <span class="text-danger">*</span>
                        </label>


                        <div class="input-group gold-input-group">

                            <span class="input-group-text">
                                ₹
                            </span>

                            <input type="number" name="reduction_amount" class="form-control gold-form-control"
                                placeholder="Enter amount" min="0" step="0.01" value="{{ old('reduction_amount') }}">

                        </div>

                    </div>

                </div>


                <!-- ACTIONS -->

                <div class="gold-actions">

                    <button type="reset" class="btn gold-cancel-btn">

                        Reset

                    </button>


                    <button type="submit" class="btn gold-save-btn">

                        <i class="ti ti-device-floppy me-1"></i>

                        Save Gold

                    </button>

                </div>


            </form>

        </div>

    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.getElementById('goldForm');
            form.addEventListener('submit', () => {
                const btn = form.querySelector('.gold-save-btn');
                setTimeout(() => {
                    btn.disabled = true;
                    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Processing...';
                }, 0);
            });
        });
    </script>
@endsection