@extends('Admin.layout')

@section('content')

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

        .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;
        }

        .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;
        }

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

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

        .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;
        }

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

        .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;
        }

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

        .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;
        }

        @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">
                    Edit Gold
                </h5>

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

            </div>

        </div>


        <!-- FORM -->

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

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

                <input type="hidden" name="id" value="{{ $gold->id }}">

                <div class="row g-3">

                    <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', $gold->gram) }}" 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', $gold->purity) }}">

                        </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', $gold->amount) }}">
                        </div>

                    </div>


<!-- REDUCTION AMOUNT -->

<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 reduction amount"
            min="0"
            step="0.01"
            value="{{ old('reduction_amount', $gold->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>

                        Update 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