@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('trainer_list') }}">
                        <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 Trainers
            </h5>
        </div>
    </div>
    <div class="card p-5">
        <form id="staffForm" action="{{ route('trainer_store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <h4 class="mb-3">Personal Details</h4>
            <div class="row">

                <div class="col-lg-2 mb-3">
                    <div class="upload-box rounded-3 p-4 mt-3 text-center position-relative"
                        style="border: 1px dashed #000; background-color: #fff; height: 100%;"
                        ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)" ondrop="handleDrop(event)">

                        <input type="file" id="storeImageInput" name="profile_image"
                            class="position-absolute top-0 start-0 w-100 h-100 opacity-0" style="cursor:pointer; z-index:2;"
                            onchange="previewImage(this)" accept=".jpg,.jpeg,.png,.webp" />

                        {{-- Hidden temp path --}}
                        <input type="hidden" name="temp_image" id="tempImagePath" value="{{ old('temp_image') }}">

                        {{-- Placeholder --}}
                        <div id="uploadPlaceholder" class="{{ old('temp_image') ? 'd-none' : '' }}">
                            <svg width="56" height="44" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                                class="mb-2">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="#aaa" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                <polyline points="17 8 12 3 7 8" stroke="#aaa" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <line x1="12" y1="3" x2="12" y2="15" stroke="#aaa" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                            <p class="fw-bold mb-1 small">Upload Image</p>
                            <p class="text-muted" style="font-size:11px;">JPG, PNG, WEBP • Max 1MB</p>
                        </div>

                        {{-- Preview with remove button --}}
                        <div id="previewWrapper"
                            class="{{ old('temp_image') ? '' : 'd-none' }} position-relative d-inline-block">
                            <img id="storePreview" src="{{ old('temp_image') ? asset(old('temp_image')) : '' }}"
                                class="rounded-3" style="width:100px; height:100px; object-fit:cover;" />
                            <button type="button" onclick="removeImagePreview()"
                                class="position-absolute top-0 end-0 btn btn-danger btn-sm rounded-circle"
                                style="width:22px; height:22px; padding:0; font-size:11px; line-height:1; z-index:10;">
                                ✕
                            </button>
                        </div>

                        @error('profile_image')
                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                        @enderror
                        <small class="text-danger d-none" id="imageError">Image must be under 1MB.</small>
                    </div>
                </div>


                <div class="col-lg-10">
                    <div class="row">
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Trainer Name</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                                value="{{ old('name') }}" placeholder="Enter Trainer Name">

                            @error('name')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                                value="{{ old('email') }}" placeholder="Enter Email">

                            @error('email')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Phone Number</label>
                            <input type="tel" class="form-control @error('phone_number') is-invalid @enderror"
                                name="phone_number" value="{{ old('phone_number') }}" maxlength="10"
                                placeholder="Enter Phone Number"  oninput="this.value=this.value.replace(/[^0-9]/g,'')">

                            @error('phone_number')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label">Date of Birth</label>
                            <input type="date" class="form-control @error('dob') is-invalid @enderror" name="dob"
                                value="{{ old('dob') }}">

                            @error('dob')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label d-block">Gender</label>
                            <div class="d-flex gap-4 mt-2">

                                <div class="form-check">
                                    <input class="form-check-input @error('gender') is-invalid @enderror" type="radio"
                                        name="gender" id="genderMale" value="Male" {{ old('gender') == 'Male' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="genderMale">Male</label>
                                </div>

                                <div class="form-check">
                                    <input class="form-check-input @error('gender') is-invalid @enderror" type="radio"
                                        name="gender" id="genderFemale" value="Female" {{ old('gender') == 'Female' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="genderFemale">Female</label>
                                </div>

                                <div class="form-check">
                                    <input class="form-check-input @error('gender') is-invalid @enderror" type="radio"
                                        name="gender" id="genderOther" value="Other" {{ old('gender') == 'Other' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="genderOther">Other</label>
                                </div>

                            </div>
                            @error('gender')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Experience (Years)</label>
                    <input type="number" class="form-control @error('experience') is-invalid @enderror" name="experience"
                        value="{{ old('experience') }}" placeholder="Enter Experience">

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

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Joining Date</label>
                    <input type="date" class="form-control @error('joining_date') is-invalid @enderror" name="joining_date"
                        value="{{ old('joining_date', now()->format('Y-m-d')) }}">

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

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Employment Type</label>
                    <select class="form-select @error('employment_type') is-invalid @enderror" name="employment_type">
                        <option value="">Select Employment Type</option>
                        <option value="Full Time" {{ old('employment_type') == 'Full Time' ? 'selected' : '' }}>
                            Full Time
                        </option>
                        <option value="Part Time" {{ old('employment_type') == 'Part Time' ? 'selected' : '' }}>
                            Part Time
                        </option>
                    </select>

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

                <div class="col-lg-12 mb-3">
                    <label class="form-label">Address</label>
                    <textarea rows="3" class="form-control @error('address') is-invalid @enderror" name="address"
                        placeholder="Enter Address">{{ old('address') }}</textarea>

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


            </div>



            <div class="form-actions mt-4 d-flex gap-3 justify-content-center">
                <button type="reset" class="btn btn-label-secondary me-2" onclick="window.location.reload()">
                    Discard
                </button>
                <button type="submit" id="finalSubmit" class="btn btn-primary">
                    Submit
                </button>
            </div>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <script>
        function previewImage(input) {
            const file = input.files[0];
            if (!file) return;

            document.getElementById('imageError').classList.add('d-none');

            if (file.size > 1024 * 1024) {
                input.value = '';
                document.getElementById('imageError').classList.remove('d-none');
                return;
            }

            const reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('storePreview').src = e.target.result;
                document.getElementById('previewWrapper').classList.remove('d-none');
                document.getElementById('uploadPlaceholder').classList.add('d-none');
            };
            reader.readAsDataURL(file);
        }

        function removeImagePreview() {
            document.getElementById('storeImageInput').value = '';
            document.getElementById('storePreview').src = '';
            document.getElementById('tempImagePath').value = '';
            document.getElementById('previewWrapper').classList.add('d-none');
            document.getElementById('uploadPlaceholder').classList.remove('d-none');
        }

        function handleDragOver(e) {
            e.preventDefault();
            e.currentTarget.style.borderColor = '#0d6efd';
        }

        function handleDragLeave(e) {
            e.preventDefault();
            e.currentTarget.style.borderColor = '#000';
        }

        function handleDrop(e) {
            e.preventDefault();
            e.currentTarget.style.borderColor = '#000';
            const input = document.getElementById('storeImageInput');
            input.files = e.dataTransfer.files;
            previewImage(input);
        }
    </script>
    <script>
        document.getElementById('finalSubmit').addEventListener('click', function () {
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('staffForm').submit();
        });
    </script>

@endsection