@extends('admin.layout.app')
@section('content')
    {{-- <div class="container">
        <h2>Gold Extra Charge</h2>
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger"> {{ session('error') }} </div>
        @endif
        <form method="POST" action="{{ route('admin.gold-setting.store') }}">
            @csrf
            <div class="mb-3">
                <label>Extra Charge ($)</label>
                <input type="number" step="0.01" name="extra_charge" class="form-control" value="{{ $extraCharge }}" placeholder="Enter Extra Charge">
            </div>
            <div class="mb-3">
                <label>Authorization Password</label>
                <input type="password" name="auth_password" class="form-control" placeholder="Enter your password">
            </div>
            <button type="submit" class="btn btn-primary"> Save </button>
        </form>
    </div> --}}
    <div class="container my-5" style="max-width: 650px;">
    <!-- Alert Messages -->
    @if (session('success'))
        <div class="alert alert-success border-0 shadow-sm mb-4" style="border-radius: 8px;">
            {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger border-0 shadow-sm mb-4" style="border-radius: 8px;">
            {{ session('error') }}
        </div>
    @endif

    <!-- Main Card Wrapper -->
    <div class="card border-0 shadow-sm p-4 p-md-5" style="border-radius: 16px; background-color: #ffffff;">
        
        <!-- Header Section -->
        <div class="d-flex align-items-center gap-3 mb-4">
            <div class="d-flex align-items-center justify-content-center rounded-circle" style="width: 56px; height: 56px; min-width: 56px; background-color: #fff9e6;">
                <!-- Premium Gold Coins / Settings Icon -->
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#d4af37" class="bi bi-coin" viewBox="0 0 16 16">
                    <path d="M5.5 9.511c.076.954.83 1.697 2.182 1.785V12h.6v-.709c1.4-.074 2.16-.839 2.16-1.91 0-1.002-.574-1.523-1.727-1.79l-.726-.171c-.722-.167-1.127-.406-1.127-.923 0-.529.412-.89 1.114-.89.704 0 1.09.344 1.137.876h.793c-.053-.941-.741-1.614-1.93-1.723V3h-.6v.714c-1.353.074-2.079.8-2.079 1.83 0 .973.57 1.492 1.637 1.748l.72.172c.767.18 1.166.452 1.166.973 0 .524-.442.92-1.18.92-.792 0-1.196-.388-1.258-.956H5.5zm6.5-4a.5.5 0 0 1 .5-.5c.746 0 1.424.3 1.929.784a.5.5 0 1 1-.708.708 1.82 1.82 0 0 0-1.221-.492.5.5 0 0 1-.5-.5z"/>
                    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8z"/>
                </svg>
            </div>
            <div>
                <h3 class="fw-bold mb-1" style="color: #0b132b; font-size: 1.4rem;">Gold Extra Charge</h3>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">Adjust systemic rate markups. This action requires elevation privileges.</p>
            </div>
        </div>

        <hr class="text-muted opacity-25 my-4">

        <!-- Form Starts -->
        <form method="POST" action="{{ route('admin.gold-setting.store') }}">
            @csrf
        <!-- Pricing Configuration -->
        <div class="row">

            <!-- Extra Charge -->
    <div class="col-md-4 mb-4">
        <label class="form-label fw-semibold mb-2" style="color:#334155;">
            Extra Charge ($)
        </label>

        <div class="input-group shadow-sm">
            <span class="input-group-text border-0 bg-light">$</span>

            <input
                type="number"
                step="0.01"
                min="0"
                name="extra_charge"
                class="form-control border-0 bg-light"
                value="{{ $extraCharge ?? '' }}"
                placeholder="0.00"
                required>
        </div>

        <small class="text-muted">
            Additional charge on gold price.
        </small>
    </div>

    <!-- Duty -->
    <div class="col-md-4 mb-4">
        <label class="form-label fw-semibold mb-2" style="color:#334155;">
            Duty (%)
        </label>

        <div class="input-group shadow-sm">
            <input
                type="number"
                step="0.01"
                min="0"
                max="100"
                name="duty_percent"
                class="form-control border-0 bg-light"
                value="{{ $dutyPercent ?? '' }}"
                placeholder="0.00"
                >

            <span class="input-group-text border-0 bg-light">%</span>
        </div>

        <small class="text-muted">
            Import duty percentage.
        </small>
    </div>

    <!-- Gold Loss -->
    <div class="col-md-4 mb-4">
        <label class="form-label fw-semibold mb-2" style="color:#334155;">
            Gold Loss (%)
        </label>

        <div class="input-group shadow-sm">
            <input
                type="number"
                step="0.01"
                min="0"
                max="100"
                name="gold_loss_percent"
                class="form-control border-0 bg-light"
                value="{{ $goldLossPercent ?? '' }}"
                placeholder="0.00"
                >

            <span class="input-group-text border-0 bg-light">%</span>
        </div>

        <small class="text-muted">
            Manufacturing loss percentage.
        </small>
    </div>

</div>

<!-- Authorization Password -->
<div class="mb-4">
    <label class="form-label fw-semibold mb-2" style="color:#334155;">
        Authorization Password
    </label>

    <div class="input-group shadow-sm">
        <span class="input-group-text border-0 bg-light">
            <i class="fas fa-lock"></i>
        </span>

        <input
            type="password"
            name="auth_password"
            class="form-control border-0 bg-light"
            placeholder="Enter your password"
            autocomplete="new-password"
            value=""
            required>
    </div>
</div>

            <!-- Bottom Action Panel -->
            <div class="d-flex flex-column align-items-center justify-content-center">
                <button type="submit" class="btn text-white px-5 py-2.5 fw-semibold shadow-sm mb-3 w-100" style="background-color: #5c4cf4; border-radius: 8px; max-width: 280px; font-size: 0.95rem; transition: background 0.2s;">
                    Save Configuration
                </button>
                <div class="d-flex align-items-center gap-1 text-muted precision-text" style="font-size: 0.75rem;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                    </svg>
                    Changes will take effect instantly across live catalogs.
                </div>
            </div>
            
        </form>
    </div>
</div>
@endsection