@extends('Admin.layout')
@section('content')
<h5> <button type="button" class="btn btn-icon bg-white waves-effect me-2" onclick="window.history.back()" ;
        style="box-shadow: 0px 9px 12px -2px #66328E1F;">
        <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 icons-tabler-outline icon-tabler-chevron-left">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M15 6l-6 6l6 6" />
        </svg>
    </button>Create Staff</h5>
<div class="card p-5">

    <div class="container">
        <h5>Create Staff</h5>
        <form id="staffForm" method="POST" action="{{route('create_staff_form')}}">
            @csrf
            <div class="row">
                <div class="col-lg-6 mb-2">
                    <label class="form-label" for="name">Name</label>
                    <input type="text"
                        class="form-control"
                        id="name"
                        name="name"
                        value="{{ old('name') }}"
                        placeholder="Enter Name">
                    @error('name') <div class="text-danger">{{ $message }}</div> @enderror
                </div>

                <div class="col-lg-6 mb-2">
                    <label class="form-label" for="phone_number">Phone</label>
                    <input type="tel"
                        class="form-control"
                        id="phone_number"
                        name="phone_number"
                        value="{{ old('phone_number') }}"
                        placeholder="Enter Phone"
                        pattern="^[0-9]{10}$"
                        maxlength="10"
                        inputmode="numeric">
                    @error('phone_number') <div class="text-danger">{{ $message }}</div> @enderror

                </div>
            </div>

            <div class="row">
            <div class="col-lg-3 mb-2 mt-5">
            <label class="form-check-label custom-option-content" for="customRadioTemp1">
                <input name="staff_type" class="form-check-input" type="radio" value="saw_mill"
                    id="staff_type" checked="" {{ old('staff_type') == 'saw_mill' ? 'checked' : '' }}>
                <span class="custom-option-header">
                    <span class="h6 mb-0">Saw Mill</span>
                </span>

            </label>
        </div>
        <div class="col-lg-3 mb-2 mt-5">

            <label class="form-check-label custom-option-content" for="customRadioTemp1">
                <input name="staff_type" class="form-check-input" type="radio" value="show_room"
                    id="staff_type" checked="" {{ old('staff_type') == 'show_room' ? 'checked' : '' }}>
                <span class="custom-option-header">
                    <span class="h6 mb-0">Show Room</span>
                </span>

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

        </div>

            <div class="form-actions mt-4 d-flex justify-content-center">
                <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal"
                    data-bs-target="#submit_staff">Submit</button>
                <button type="reset" class="btn btn-label-secondary">Discard</button>
            </div>
        </form>
    </div>
</div>


</div>


<!-- submit -->
<div class="modal fade" id="submit_staff" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit ?</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="submit" id="submit_btn" class="btn btn-primary p-3 fw-semibold ">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('staffForm').submit();
    });
</script>
@endsection