@extends('layouts.admin')

@section('page-title', 'Add Staff')

@section('content')
<div class="container py-4">
    <h2>Add New Staff Member</h2>

    @if($errors->any())
        <div class="alert alert-danger mt-3">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('staff.store') }}" method="POST" class="mt-3">
        @csrf

        <div class="row g-3">

            <div class="col-md-6">
                <label class="form-label">Staff Type</label>
                <select name="staff_type" id="staff_type" class="form-select" onchange="toggleStaffType()">
                    <option value="">-- Select Staff Type --</option>
                    <option value="staff"    {{ old('staff_type') == 'staff'    ? 'selected' : '' }}>Staff</option>
                    <option value="sales"    {{ old('staff_type') == 'sales'    ? 'selected' : '' }}>Sales</option>
                    <option value="vendor"   {{ old('staff_type') == 'vendor'   ? 'selected' : '' }}>Vendor</option>
                    <option value="subadmin" {{ old('staff_type') == 'subadmin' ? 'selected' : '' }}>Sub Admin</option>
                </select>
            </div>

            {{-- Common Fields --}}
            <div class="col-md-6">
                <label class="form-label">Full Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                    value="{{ old('name') }}" placeholder="e.g. John Doe">
                @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="col-md-6">
                <label class="form-label">Email</label>
                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                    value="{{ old('email') }}" placeholder="e.g. john@example.com">
                @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="col-md-6">
                <label class="form-label">Phone</label>
                <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror"
                    value="{{ old('phone') }}" placeholder="e.g. 9876543210">
                @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            {{-- Designation (staff only) --}}
            <div class="col-md-6" id="designation_field">
                <label class="form-label">Designation</label>
                <select name="designation_id" class="form-select @error('designation_id') is-invalid @enderror">
                    <option value="">-- Select Designation --</option>
                    @foreach($designations as $designation)
                        <option value="{{ $designation->id }}" {{ old('designation_id') == $designation->id ? 'selected' : '' }}>
                            {{ $designation->name }}
                        </option>
                    @endforeach
                </select>
                @error('designation_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            {{-- Region (staff & sales) --}}
            <div class="col-md-6" id="region_field">
                <label class="form-label">Region</label>
                <select name="region_id" class="form-select @error('region_id') is-invalid @enderror">
                    <option value="">-- Select Region --</option>
                    @foreach($regions as $region)
                        <option value="{{ $region->id }}" {{ old('region_id') == $region->id ? 'selected' : '' }}>
                            {{ $region->name }}
                        </option>
                    @endforeach
                </select>
                @error('region_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

        </div>

        {{-- Sales Password --}}
        <div id="sales_section" style="display:none;" class="row g-3 mt-2">
            <div class="col-md-6">
                <label class="form-label">Sales Password <span class="text-danger">*</span></label>
                <div class="input-group">
                    <input type="text" id="sales_password" name="sales_password" class="form-control @error('sales_password') is-invalid @enderror">
                    <button type="button" class="btn btn-outline-primary" onclick="generatePassword('sales_password')">Generate</button>
                </div>
                @error('sales_password') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
        </div>

        {{-- Subadmin Password --}}
        <div id="subadmin_section" style="display:none;" class="row g-3 mt-2">
            <div class="col-md-6">
                <label class="form-label">Sub Admin Password <span class="text-danger">*</span></label>
                <div class="input-group">
                    <input type="text" id="subadmin_password" name="subadmin_password" class="form-control @error('subadmin_password') is-invalid @enderror">
                    <button type="button" class="btn btn-outline-primary" onclick="generatePassword('subadmin_password')">Generate</button>
                </div>
                @error('subadmin_password') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
        </div>

        {{-- Vendor Section --}}
        <div id="vendor_section" style="display:none;">

            <div class="row g-3 mt-2">
                <div class="col-md-6">
                    <label class="form-label">Vendor Password <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="text" id="vendor_password" name="vendor_password" class="form-control @error('vendor_password') is-invalid @enderror">
                        <button type="button" class="btn btn-outline-primary" onclick="generatePassword('vendor_password')">Generate</button>
                    </div>
                    @error('vendor_password') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header fw-semibold">Company Details</div>
                <div class="card-body">
                    <div class="row g-3">

                        <div class="col-md-6">
                            <label class="form-label">Company Name <span class="text-danger">*</span></label>
                            <input type="text" name="company_name" class="form-control @error('company_name') is-invalid @enderror"
                                value="{{ old('company_name') }}" placeholder="e.g. ABC Pvt Ltd">
                            @error('company_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">GST Number</label>
                            <input type="text" name="gst_number" class="form-control"
                                value="{{ old('gst_number') }}" placeholder="e.g. 22AAAAA0000A1Z5">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">PAN Number</label>
                            <input type="text" name="pan_number" class="form-control"
                                value="{{ old('pan_number') }}" placeholder="e.g. AAAAA0000A">
                        </div>

                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header fw-semibold">Address</div>
                <div class="card-body">
                    <div class="row g-3">

                        <div class="col-md-12">
                            <label class="form-label">Address</label>
                            <textarea name="address" class="form-control" rows="2" placeholder="Street / Area">{{ old('address') }}</textarea>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">City</label>
                            <input type="text" name="city" class="form-control" value="{{ old('city') }}" placeholder="City">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">State</label>
                            <input type="text" name="state" class="form-control" value="{{ old('state') }}" placeholder="State">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Pincode</label>
                            <input type="text" name="pincode" class="form-control" value="{{ old('pincode') }}" placeholder="600001">
                        </div>

                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header fw-semibold">Bank Details</div>
                <div class="card-body">
                    <div class="row g-3">

                        <div class="col-md-4">
                            <label class="form-label">Bank Name</label>
                            <input type="text" name="bank_name" class="form-control" value="{{ old('bank_name') }}" placeholder="e.g. SBI, HDFC">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Account Number</label>
                            <input type="text" name="account_number" class="form-control" value="{{ old('account_number') }}" placeholder="Account number">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">IFSC Code</label>
                            <input type="text" name="ifsc_code" class="form-control" value="{{ old('ifsc_code') }}" placeholder="e.g. SBIN0001234">
                        </div>

                    </div>
                </div>
            </div>

        </div>

        <div class="mt-4">
            <button type="submit" class="btn btn-success">Save Staff</button>
            <a href="{{ route('staff.index') }}" class="btn btn-secondary">Back</a>
        </div>

    </form>
</div>

<script>
    function toggleStaffType() {
        const type = document.getElementById('staff_type').value;

        // Hide all conditional sections first
        document.getElementById('designation_field').style.display = 'none';
        document.getElementById('region_field').style.display      = 'none';
        document.getElementById('sales_section').style.display     = 'none';
        document.getElementById('subadmin_section').style.display  = 'none';
        document.getElementById('vendor_section').style.display    = 'none';

        if (type === 'staff') {
            document.getElementById('designation_field').style.display = 'block';
            document.getElementById('region_field').style.display      = 'block';
        }

        if (type === 'sales') {
            document.getElementById('region_field').style.display  = 'block';
            document.getElementById('sales_section').style.display = 'flex';
        }

        if (type === 'subadmin') {
            document.getElementById('subadmin_section').style.display = 'flex';
        }

        if (type === 'vendor') {
            document.getElementById('vendor_section').style.display = 'block';
        }
    }

    function generatePassword(field) {
        const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$';
        let password = '';
        for (let i = 0; i < 10; i++) {
            password += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        document.getElementById(field).value = password;
    }

    // Restore state on validation error
    document.addEventListener('DOMContentLoaded', function () {
        const type = document.getElementById('staff_type').value;
        if (type) toggleStaffType();
    });
</script>

@endsection