@extends('Admin.layout')

@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.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">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M15 6l-6 6l6 6"/>
                    </svg>
                </a>
            </button>

            Edit 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('update_billing_staff',$billingStaff->id) }}"
                  method="POST"
                  id="editBillingForm">

                @csrf

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

                <div class="row">

                    {{-- Branch --}}
                    <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',$billingStaff->branch_id)==$branch->id ? 'selected' : '' }}>
                                    {{ $branch->branch_name }}
                                </option>

                            @endforeach

                        </select>

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

                    {{-- Category --}}
                    <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',$billingStaff->category)=='Billing User' ? 'selected' : '' }}>
                                Billing User
                            </option>

                            <option value="Billing Cashier"
                                {{ old('category',$billingStaff->category)=='Billing Cashier' ? 'selected' : '' }}>
                                Billing Cashier
                            </option>

                            <option value="Delivery"
                                {{ old('category',$billingStaff->category)=='Delivery' ? 'selected' : '' }}>
                                Delivery
                            </option>

                        </select>

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

                    </div>

                    {{-- Staff --}}
                   <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->user_id }}"
                {{ (string) old('staff_id', $billingStaff->staff_id) === (string) $staff->user_id ? 'selected' : '' }}>
                {{ $staff->name }}
            </option>

        @endforeach

    </select>

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

</div>

                    {{-- User ID --}}
                    <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',$billingStaff->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
    </label>

    <div class="input-group">

        <input type="password"
               id="password"
               name="password"
               class="form-control @error('password') is-invalid @enderror"
               value="{{ old('password', $billingStaff->password_hint) }}"
               autocomplete="off">

        <button class="btn btn-outline-secondary"
                type="button"
                id="togglePassword">
            <i class="bi bi-eye" id="eyeIcon"></i>
        </button>

    </div>

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

</div>

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

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

                        <button type="submit"
                                class="btn btn-primary"
                                id="updateBtn">
                            Update
                        </button>

        </div>
                       

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

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

<script>
document.getElementById('updateBtn').addEventListener('click', function(e){

    e.preventDefault();

    let btn = this;

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

    document.getElementById('editBillingForm').submit();

});
</script>
<script>
document.getElementById('togglePassword').addEventListener('click', function () {

    let password = document.getElementById('password');
    let eyeIcon = document.getElementById('eyeIcon');

    if (password.type === "password") {
        password.type = "text";
        eyeIcon.classList.remove('bi-eye');
        eyeIcon.classList.add('bi-eye-slash');
    } else {
        password.type = "password";
        eyeIcon.classList.remove('bi-eye-slash');
        eyeIcon.classList.add('bi-eye');
    }

});
</script>

@endsection