@extends('Admin.layout')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('branch') }}">
                    <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>
            Add Billing User
        </h5>
    </div>
</div>
<div class="row align-items-center justify-content-center mt-3 mb-3">
    <div class="col-lg-6">

        <div class="card p-5">

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

    <h5 class="mb-4">Add Billing Staff</h5>

    <div class="row">

        <div class="col-lg-12 mb-3">
            <label class="form-label">Select Branch <span class="text-danger">*</span></label>

            <select class="form-select @error('branch_id') is-invalid @enderror" name="branch_id">
                <option value="">Select Branch</option>

                @foreach($branches as $branch)
                    <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>
                        {{ $branch->branch_name }}
                    </option>
                @endforeach
            </select>

            @error('branch_id')
                <div class="text-danger small">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-lg-12 mb-3">
            <label class="form-label">Select Category <span class="text-danger">*</span></label>

            <select class="form-select @error('category') is-invalid @enderror" name="category">
                <option value="">Select Category</option>
                <option value="Billing User" {{ old('category')=='Billing User' ? 'selected' : '' }}>Billing User</option>
                <option value="Billing Cashier" {{ old('category')=='Billing Cashier' ? 'selected' : '' }}>Billing Cashier</option>
                <option value="Delivery" {{ old('category')=='Delivery' ? 'selected' : '' }}>Delivery</option>
            </select>

            @error('category')
                <div class="text-danger small">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-lg-12 mb-3">
            <label class="form-label">Select Staff <span class="text-danger">*</span></label>

            <select class="form-select @error('staff_id') is-invalid @enderror" name="staff_id">
                <option value="">Select Staff</option>

                @foreach($staffs as $staff)
                    <option value="{{ $staff->id }}" {{ old('staff_id') == $staff->id ? 'selected' : '' }}>
                        {{ $staff->name }}
                    </option>
                @endforeach
            </select>

            @error('staff_id')
                <div class="text-danger small">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-lg-12 mb-3">
            <label class="form-label">User ID <span class="text-danger">*</span></label>

            <input type="text"
                   class="form-control @error('user_id') is-invalid @enderror"
                   name="user_id"
                   value="{{ old('user_id') }}"
                   placeholder="Enter User ID">

            @error('user_id')
                <div class="text-danger small">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-lg-12 mb-3">
            <label class="form-label">Password <span class="text-danger">*</span></label>

            <input type="password"
                   class="form-control @error('password') is-invalid @enderror"
                   name="password"
                   placeholder="Enter Password">

            @error('password')
                <div class="text-danger small">{{ $message }}</div>
            @enderror
        </div>

        <div class="text-center mt-3">

            <button type="reset" class="btn btn-secondary">
                Discard
            </button>

            <button type="submit" class="btn btn-primary" id="finalSubmit">
                Submit
            </button>

        </div>

    </div>
</form>

        </div>

    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    document.getElementById('finalSubmit').addEventListener('click', function(e) {
        e.preventDefault();

        let btn = this;
        let form = document.getElementById('addBranchForm'); //form

        btn.disabled = true;
        btn.innerText = 'Processing...';

        setTimeout(() => {
            form.submit();
        }, 300);
    });
</script>
@endsection