@extends('HR.layout')

@section('content')

<div class="container-fluid py-4">

    <!-- PAGE HEADER -->
    <div class="card shadow-sm border-0 mb-4">

        <div class="card-body">

            <div class="d-flex flex-column flex-md-row
                        justify-content-between
                        align-items-md-center
                        gap-3">

                <div>

                    <h3 class="mb-1">
                        Staff Details
                    </h3>

                    <p class="text-muted mb-0">
                        View and edit employee information
                    </p>

                </div>

                @if($staff->photo)

                    <img src="{{ asset('storage/' . $staff->photo) }}"
                         alt="Staff Photo"
                         class="rounded-circle border"
                         width="70"
                         height="70">

                @endif

            </div>

        </div>

    </div>


  


    <!-- ERROR -->
    @if(session('error'))

        <div class="alert alert-danger alert-dismissible fade show"
             role="alert">

            {{ session('error') }}

            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="alert">
            </button>

        </div>

    @endif


    <!-- VALIDATION ERRORS -->
    @if($errors->any())

        <div class="alert alert-danger">

            <h6 class="alert-heading">
                Please correct the following:
            </h6>

            <ul class="mb-0">

                @foreach($errors->all() as $error)

                    <li>{{ $error }}</li>

                @endforeach

            </ul>

        </div>

    @endif


    <!-- FORM -->
    <form action="{{ route('update_staff', $staff->id) }}"
          method="POST"
          enctype="multipart/form-data">

        @csrf

        @method('PUT')


        <!-- ====================================================== -->
        <!-- 01 PERSONAL DETAILS -->
        <!-- ====================================================== -->

        <div class="card shadow-sm border-0 mb-4">

            <div class="card-header bg-white border-bottom">

                <h5 class="mb-0">
                    01 — Personal Details
                </h5>

            </div>

            <div class="card-body">

                <div class="row g-4">

                    <!-- Full Name -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            Full Name
                        </label>

                        <input type="text"
                               name="name"
                               class="form-control"
                               value="{{ old('name', $staff->name) }}"
                               required>

                    </div>


                    <!-- Employee ID -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            Employee ID
                        </label>

                        <input type="text"
                               name="user_id"
                               class="form-control"
                               value="{{ old('user_id', $staff->user_id) }}"
                               required>

                    </div>


                    <!-- Designation -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            Designation / Role
                        </label>

                        <input type="text"
                               name="designation"
                               class="form-control"
                               value="{{ old('designation', $staff->designation) }}"
                               required>

                    </div>


                    <!-- Gender -->
                    <div class="col-md-3">

                        <label class="form-label fw-semibold">
                            Gender
                        </label>

                        <select name="gender"
                                class="form-select">

                            <option value="">
                                Select Gender
                            </option>

                            <option value="Male"
                                {{ old('gender', $staff->gender) == 'Male' ? 'selected' : '' }}>
                                Male
                            </option>

                            <option value="Female"
                                {{ old('gender', $staff->gender) == 'Female' ? 'selected' : '' }}>
                                Female
                            </option>

                            <option value="Other"
                                {{ old('gender', $staff->gender) == 'Other' ? 'selected' : '' }}>
                                Other
                            </option>

                        </select>

                    </div>


                    <!-- Marital Status -->
                    <div class="col-md-3">

                        <label class="form-label fw-semibold">
                            Marital Status
                        </label>

                        <select name="marital_status"
                                class="form-select">

                            <option value="">
                                Select Status
                            </option>

                            <option value="Single"
                                {{ old('marital_status', $staff->marital_status) == 'Single' ? 'selected' : '' }}>
                                Single
                            </option>

                            <option value="Married"
                                {{ old('marital_status', $staff->marital_status) == 'Married' ? 'selected' : '' }}>
                                Married
                            </option>

                            <option value="Divorced"
                                {{ old('marital_status', $staff->marital_status) == 'Divorced' ? 'selected' : '' }}>
                                Divorced
                            </option>

                            <option value="Widowed"
                                {{ old('marital_status', $staff->marital_status) == 'Widowed' ? 'selected' : '' }}>
                                Widowed
                            </option>

                        </select>

                    </div>


                    <!-- DOB -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            Date of Birth
                        </label>

                        <input type="date"
                               name="dob"
                               class="form-control"
                               value="{{ old('dob', $staff->dob) }}">

                    </div>

                </div>

            </div>

        </div>


        <!-- ====================================================== -->
        <!-- 02 CONTACT DETAILS -->
        <!-- ====================================================== -->

        <div class="card shadow-sm border-0 mb-4">

            <div class="card-header bg-white border-bottom">

                <h5 class="mb-0">
                    02 — Contact Details
                </h5>

            </div>

            <div class="card-body">

                <div class="row g-4">

                    <!-- Official Email -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            Official Email
                        </label>

                        <input type="email"
                               name="email"
                               class="form-control"
                               value="{{ old('email', $staff->email) }}"
                               required>

                    </div>


                    <!-- Personal Email -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            Personal Email
                        </label>

                        <input type="email"
                               name="personal_email"
                               class="form-control"
                               value="{{ old('personal_email', $staff->personal_email) }}">

                    </div>


                    <!-- Phone -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            Phone Number
                        </label>

                        <input type="text"
                               name="mobile"
                               class="form-control"
                               value="{{ old('mobile', $staff->mobile) }}">

                    </div>


                    <!-- Alternate Phone -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            Alternate Phone
                        </label>

                        <input type="text"
                               name="alternate_phone_number"
                               class="form-control"
                               value="{{ old('alternate_phone_number', $staff->alternate_phone_number) }}">

                    </div>

                </div>

            </div>

        </div>


        <!-- ====================================================== -->
        <!-- 03 ADDRESS -->
        <!-- ====================================================== -->

        <div class="card shadow-sm border-0 mb-4">

            <div class="card-header bg-white border-bottom">

                <h5 class="mb-0">
                    03 — Address Details
                </h5>

            </div>

            <div class="card-body">

                <div class="row g-4">

                    <!-- Communication Address -->
                    <div class="col-12">

                        <label class="form-label fw-semibold">
                            Communication Address
                        </label>

                        <textarea name="address"
                                  class="form-control"
                                  rows="3">{{ old('address', $staff->address) }}</textarea>

                    </div>


                    <!-- Permanent Address -->
                    <div class="col-12">

                        <label class="form-label fw-semibold">
                            Permanent Address
                        </label>

                        <textarea name="permanent_address"
                                  class="form-control"
                                  rows="3">{{ old('permanent_address', $staff->permanent_address) }}</textarea>

                    </div>

                </div>

            </div>

        </div>


        <!-- ====================================================== -->
        <!-- 04 KYC -->
        <!-- ====================================================== -->

        <div class="card shadow-sm border-0 mb-4">

            <div class="card-header bg-white border-bottom">

                <h5 class="mb-0">
                    04 — KYC Verification
                </h5>

            </div>

            <div class="card-body">

                <div class="row g-4">

                    <!-- Aadhaar Number -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            Aadhaar Number
                        </label>

                        <input type="text"
                               name="aadhaar_number"
                               class="form-control"
                               value="{{ old('aadhaar_number', $staff->aadhaar_number) }}">

                    </div>


                    <!-- Aadhaar Document -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            Aadhaar Document
                        </label>

                        <input type="file"
                               name="aadhaar_document"
                               class="form-control"
                               accept=".pdf,.jpg,.jpeg,.png">

                        @if($staff->aadhaar_document)

                            <div class="mt-2">

                                <a href="{{ asset('storage/' . $staff->aadhaar_document) }}"
                                   target="_blank"
                                   class="btn btn-sm btn-outline-primary">

                                    View Current Aadhaar

                                </a>

                            </div>

                        @endif

                    </div>


                    <!-- PAN -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            PAN Number
                        </label>

                        <input type="text"
                               name="pan_number"
                               class="form-control"
                               value="{{ old('pan_number', $staff->pan_number) }}">

                    </div>


                    <!-- PAN Document -->
                    <div class="col-md-6">

                        <label class="form-label fw-semibold">
                            PAN Document
                        </label>

                        <input type="file"
                               name="pan_document"
                               class="form-control"
                               accept=".pdf,.jpg,.jpeg,.png">

                        @if($staff->pan_document)

                            <div class="mt-2">

                                <a href="{{ asset('storage/' . $staff->pan_document) }}"
                                   target="_blank"
                                   class="btn btn-sm btn-outline-primary">

                                    View Current PAN

                                </a>

                            </div>

                        @endif

                    </div>

                </div>

            </div>

        </div>


        <!-- ====================================================== -->
        <!-- 05 PF -->
        <!-- ====================================================== -->

        <div class="card shadow-sm border-0 mb-4">

            <div class="card-header bg-white border-bottom">

                <h5 class="mb-0">
                    05 — Provident Fund
                </h5>

            </div>

            <div class="card-body">

                <div class="row g-4">

                    <!-- PF Applicable -->
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            PF Applicable
                        </label>

                        <select name="pf_applicable"
                                class="form-select">

                            <option value="">
                                Select
                            </option>

                            <option value="Yes"
                                {{ old('pf_applicable', $staff->pf_applicable) == 'Yes' ? 'selected' : '' }}>
                                Yes
                            </option>

                            <option value="No"
                                {{ old('pf_applicable', $staff->pf_applicable) == 'No' ? 'selected' : '' }}>
                                No
                            </option>

                        </select>

                    </div>


                    <!-- UAN -->
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            UAN Number
                        </label>

                        <input type="text"
                               name="uan_number"
                               class="form-control"
                               value="{{ old('uan_number', $staff->uan_number) }}">

                    </div>


                    <!-- PF Account -->
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            PF Account Number
                        </label>

                        <input type="text"
                               name="pf_account_number"
                               class="form-control"
                               value="{{ old('pf_account_number', $staff->pf_account_number) }}">

                    </div>

                </div>

            </div>

        </div>


        <!-- ====================================================== -->
        <!-- 06 EMPLOYMENT -->
        <!-- ====================================================== -->

        <div class="card shadow-sm border-0 mb-4">

            <div class="card-header bg-white border-bottom">

                <h5 class="mb-0">
                    06 — Employment Details
                </h5>

            </div>

            <div class="card-body">

                <div class="row g-4">

                    <!-- DOJ -->
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Date of Joining
                        </label>

                        <input type="date"
                               name="doj"
                               class="form-control"
                               value="{{ old('doj', $staff->doj) }}">

                    </div>


                    <!-- Salary -->
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Monthly Salary
                        </label>

                        <input type="number"
                               name="salary"
                               class="form-control"
                               step="0.01"
                               value="{{ old('salary', $staff->salary) }}">

                    </div>

<div class="col-md-4">

    <label class="form-label fw-semibold">
        Daily Expense
    </label>

    <input type="number"
           name="daily_expense"
           class="form-control"
           step="0.01"
           min="0"
           placeholder="Enter Daily Expense"
           value="{{ old('daily_expense', $staff->daily_expense) }}">

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

</div>
                    <!-- Photo -->
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Replace Staff Photo
                        </label>

                        <input type="file"
                               name="photo"
                               class="form-control"
                               accept=".jpg,.jpeg,.png">

                    </div>


                    @if($staff->photo)

                        <div class="col-12">

                            <label class="form-label fw-semibold d-block">
                                Current Photo
                            </label>

                            <img src="{{ asset('storage/' . $staff->photo) }}"
                                 alt="Staff Photo"
                                 class="img-thumbnail"
                                 width="150">

                        </div>

                    @endif

                </div>

            </div>

        </div>


        <!-- ====================================================== -->
        <!-- 07 CERTIFICATIONS -->
        <!-- ====================================================== -->

        <div class="card shadow-sm border-0 mb-4">

            <div class="card-header bg-white border-bottom">

                <h5 class="mb-0">
                    07 — Certifications
                </h5>

            </div>

            <div class="card-body">

                @php

                    $certificateNames = $staff->certificate_name ?? [];
                    $certificateFiles = $staff->certificate_file ?? [];

                @endphp


                @if(count($certificateNames) > 0)

                    @foreach($certificateNames as $index => $certificateName)

                        <div class="card border mb-3">

                            <div class="card-body">

                                <div class="row g-4">

                                    <!-- Certificate Name -->
                                    <div class="col-md-6">

                                        <label class="form-label fw-semibold">
                                            Certificate Name
                                        </label>

                                        <input type="text"
                                               name="certificate_names[]"
                                               class="form-control"
                                               value="{{ $certificateName }}">

                                    </div>


                                    <!-- Replace Certificate -->
                                    <div class="col-md-6">

                                        <label class="form-label fw-semibold">
                                            Replace Certificate
                                        </label>

                                        <input type="file"
                                               name="certification_files[]"
                                               class="form-control"
                                               accept=".pdf,.jpg,.jpeg,.png">

                                    </div>


                                    <!-- Current Certificate -->
                                    @if(isset($certificateFiles[$index]))

                                        <div class="col-12">

                                            <a href="{{ asset('storage/' . $certificateFiles[$index]) }}"
                                               target="_blank"
                                               class="btn btn-sm btn-outline-primary">

                                                View Current Certificate

                                            </a>

                                        </div>

                                    @endif

                                </div>

                            </div>

                        </div>

                    @endforeach

                @else

                    <div class="alert alert-secondary mb-0">

                        No certificates stored for this staff member.

                    </div>

                @endif

            </div>

        </div>


        <!-- ====================================================== -->
        <!-- 08 SYSTEM INFORMATION -->
        <!-- ====================================================== -->

        <div class="card shadow-sm border-0 mb-4">

            <div class="card-header bg-white border-bottom">

                <h5 class="mb-0">
                    08 — System Information
                </h5>

            </div>

            <div class="card-body">

                <div class="row g-4">

                    <!-- Database ID -->
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Staff Database ID
                        </label>

                        <input type="text"
                               class="form-control"
                               value="{{ $staff->id }}"
                               readonly>

                    </div>


                    <!-- Created -->
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Created At
                        </label>

                        <input type="text"
                               class="form-control"
                               value="{{ $staff->created_at }}"
                               readonly>

                    </div>


                    <!-- Updated -->
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Last Updated
                        </label>

                        <input type="text"
                               class="form-control"
                               value="{{ $staff->updated_at }}"
                               readonly>

                    </div>

                </div>

            </div>

        </div>


        <!-- ====================================================== -->
        <!-- BUTTONS -->
        <!-- ====================================================== -->

        <div class="d-flex flex-wrap gap-2 mb-4">

            <button type="submit"
                    class="btn btn-primary btn-lg">

                Update Staff

            </button>


            <a href="{{ url()->previous() }}"
               class="btn btn-secondary btn-lg">

                Back

            </a>

        </div>

    </form>

</div>

@endsection