@extends('welcome.welcome-layout')

@section('style')
    <style type="text/css" data-hse-inline-css="true">
        @media only screen and (max-width: 479.98px) {

            .dark_outline_btn,
            .dark_btn {
                width: 100%;
            }
        }

        .company_agreement input.form-check-input {
            width: 30px;
            height: 30px;
        }

        .modal .modal-header.green_border {
            border-top: 5px solid #5093c8;
        }

        .banner-sec-hero-document {
            background-color: rgba(245, 248, 251, 1);
            width: 100%;
            height: 30vh;
        }

        .banner-content-about h2 {
            color: rgba(34, 42, 46, 1);
        }

        .document_checkbox input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 1.5rem;
            height: 1.5rem;
            border: 1px solid rgba(195, 204, 208, 1);
            background-color: rgba(236, 242, 244, 1);
            border-radius: 4px;
            cursor: pointer;
            position: relative;
        }
        section.profile {
            min-height: calc(100vh - 200px);
            height: auto !important;
        }

        .profile-card {
            overflow: hidden;
        }

        .document-wrapper {
            width: 100%;
            overflow: hidden;
        }

        .document-wrapper iframe {
            display: block;
            max-width: 100%;
            width: 100%;
        }

        html, body {
            overflow-x: hidden;
            width: 100%;
        }
        .section-divider {
            border: 0;
            height: 1px;
            background: #dee2e6;
            margin: 30px 0;
        }

        .card {
            border-radius: 10px;
        }

        .card-body {
            padding: 25px;
        }

        .form-label,
        label {
            font-weight: 500;
            margin-bottom: 6px;
            text-align: justify;
        }

        .form-control {
            min-height: 45px;
        }

        .form-check-input {
            cursor: pointer;
        }
        .form-check-input:checked {
            background-color: #2a7fd6 !important;
            border-color: #2a7fd6 !important;
        }

        .form-check-input:focus {
            box-shadow: 0 0 0 0.15rem rgba(42, 127, 214, 0.25);
        }
    </style>
@endsection

@section('content')
    <section class="banner-sec-hero-document d-flex align-items-center justify-content-center p-relative">
        <div class="container">
            <div class="row banner-content-about">
                <div class="col-md-12 text-center">
                    <h2 class="text-uppercase fw-bold mb-md-4 mb-4">Employee Details</h2>
                </div>
            </div>
        </div>
    </section>
    <section class="profile">
        <div class="container">
            <div class="row pt-5 pb-5 justify-content-center">
                {{-- <div class="col-md-7 text-center"> --}}
                <div class="col-lg-8 col-md-8 mx-auto">
                    <div class="profile-card py-4 px-4">
                        <div class="card-body">
                            <form action="{{ route('welcome.employee.details.save', $auth->user_id)}}" method="POST" autocomplete="off">
                                @csrf
                                {{-- Company Name --}}
                                {{-- @forelse($employeeDetails as $empDetails) --}}
                                    <div class="card shadow-sm border-0 mb-4">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <h4 class="fw-bold mb-3">Company Information</h4>
                                                </div>
                                                @if(empty($empDetails))
                                                    <div class="col-md-4 text-end">
                                                        <input type="reset" id="clearButton" class="blue-big-button gap-2 py-2 px-3 ms-3 d-inline-flex align-items-center" value="Clear" />
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <label class="form-label">Company Name</label>
                                                    <input type="text" autocomplete="off"
                                                        name="company_name"
                                                        class="form-control"
                                                        value="{{ $empDetails->company_name ?? '' }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <hr class="section-divider">

                                    {{-- Personal Details --}}
                                    <div class="card shadow-sm border-0 mb-4">
                                        <div class="card-body">
                                            <h4 class="fw-bold mb-4">Personal Details</h4>

                                            <div class="row">

                                                <div class="col-md-3 mb-3">
                                                    <label class="form-label">Title</label>
                                                    <select name="title" class="form-control selectpicker">

                                                        <option value="" {{ old('title', $empDetails?->title) == '' ? 'selected' : '' }}>Select</option>

                                                        <option value="1" {{ old('title', $empDetails?->title) == '1' ? 'selected' : '' }}>Mr</option>

                                                        <option value="2" {{ old('title', $empDetails?->title) == '2' ? 'selected' : '' }}>Ms</option>

                                                        <option value="3" {{ old('title', $empDetails?->title) == '3' ? 'selected' : '' }}>Mrs</option>

                                                        <option value="4" {{ old('title', $empDetails?->title) == '4' ? 'selected' : '' }}>Miss</option>

                                                        </select>
                                                </div>

                                                <div class="col-md-3 mb-3">
                                                    <label class="form-label">NI Number</label>
                                                    <input type="text" autocomplete="off"
                                                        name="ni_number"
                                                        class="form-control"
                                                        value="{{ $empDetails->ni_number ?? '' }}">
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label">Surname</label>
                                                    <input type="text" autocomplete="off"
                                                        name="surname"
                                                        class="form-control"
                                                        value="{{ $empDetails->surname ?? '' }}">
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label">First Name</label>
                                                    <input type="text" autocomplete="off"
                                                        name="first_name"
                                                        class="form-control"
                                                        value="{{ $empDetails->first_name ?? '' }}">
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label">Middle Name(s)</label>
                                                    <input type="text" autocomplete="off"
                                                        name="middle_name"
                                                        class="form-control"
                                                        value="{{ $empDetails->middle_name ?? '' }}">
                                                </div>

                                                <div class="col-md-12 mb-3">
                                                    <label class="form-label">Address Line 1</label>
                                                    <input type="text" autocomplete="off"
                                                        name="address_line1"
                                                        class="form-control"
                                                        value="{{ $empDetails->address_line1 ?? '' }}">
                                                </div>

                                                <div class="col-md-12 mb-3">
                                                    <label class="form-label">Address Line 2</label>
                                                    <input type="text" autocomplete="off"
                                                        name="address_line2"
                                                        class="form-control"
                                                        value="{{ $empDetails->address_line2 ?? '' }}">
                                                </div>

                                                <div class="col-md-12 mb-3">
                                                    <label class="form-label">Address Line 3</label>
                                                    <input type="text" autocomplete="off"
                                                        name="address_line3"
                                                        class="form-control"
                                                        value="{{ $empDetails->address_line3 ?? '' }}">
                                                </div>

                                                <div class="col-md-4 mb-3">
                                                    <label class="form-label">Postcode</label>
                                                    <input type="text" autocomplete="off"
                                                        name="postcode"
                                                        class="form-control"
                                                        value="{{ $empDetails->postcode ?? '' }}">
                                                </div>

                                                <div class="col-md-8 mb-3">
                                                    <label class="form-label">Email</label>
                                                    <input type="email" autocomplete="off"
                                                        name="email"
                                                        class="form-control"
                                                        value="{{ $empDetails->email ?? '' }}">
                                                </div>

                                                <div class="col-md-4 mb-3">
                                                    <label class="form-label">Date of Birth</label>
                                                    <input type="text" autocomplete="off"
                                                        name="dob"
                                                        class="form-control datepicker"
                                                        value="{{ !empty($empDetails->start_date)
                                                                    ? date(config('choicescrm.date_format_forms'), strtotime($empDetails->start_date))
                                                                    : '' }}">
                                                </div>

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

                                    <hr class="section-divider">

                                    {{-- Job Details + Bank Details --}}
                                    <div class="row">

                                        {{-- Job Details --}}
                                        <div class="col-lg-6 mb-4">
                                            <div class="card shadow-sm border-0 h-100">
                                                <div class="card-body">

                                                    <h4 class="fw-bold mb-4">Job Details</h4>

                                                    <div class="row">

                                                        <div class="col-md-6 mb-3">
                                                            <label>Employee Ref</label>
                                                            <input type="text" autocomplete="off"
                                                                name="employee_ref"
                                                                class="form-control" value="{{ $empDetails->employee_ref ?? ''}}">
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <label>Department</label>
                                                            <input type="text" autocomplete="off"
                                                                name="department"
                                                                class="form-control" value="{{ $empDetails->department ?? ''}}">
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <label>Cost Centre</label>
                                                            <input type="text" autocomplete="off"
                                                                name="cost_centre"
                                                                class="form-control" value="{{ $empDetails->cost_centre ?? ''}}">
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <label>Start Date</label>

                                                            <input
                                                                type="text" autocomplete="off"
                                                                name="start_date"
                                                                class="form-control datepicker"
                                                                value="{{ !empty($empDetails->start_date)
                                                                    ? date(config('choicescrm.date_format_forms'), strtotime($empDetails->start_date))
                                                                    : '' }}">
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <label>Salary (£)</label>
                                                            <input type="number" autocomplete="off"
                                                                step="0.01"
                                                                name="salary"
                                                                class="form-control mt-4" value="{{ $empDetails->salary ?? ''}}">
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <label>Hourly Rate (£)</label>
                                                            <input type="number" autocomplete="off"
                                                                step="0.01"
                                                                name="hourly_rate"
                                                                class="form-control" value="{{ $empDetails->hourly_rate ?? ''}}">
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <label>Overtime Rate (£)</label>
                                                            <input type="number" autocomplete="off"
                                                                step="0.01"
                                                                name="overtime_rate"
                                                                class="form-control" value="{{ $empDetails->overtime_rate ?? ''}}">
                                                        </div>

                                                        <div class="col-md-12 mb-3">
                                                            <label>Hours Per Week</label>
                                                            <input type="number" autocomplete="off"
                                                                name="hours_per_week"
                                                                class="form-control" value="{{ $empDetails->hours_per_week ?? ''}}">
                                                        </div>

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

                                                            <label class="fw-semibold d-block mb-2">
                                                                Working Pattern
                                                            </label>

                                                            @foreach(['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] as $day)

                                                                <div class="form-check form-check-inline">

                                                                    <input
                                                                        class="form-check-input"
                                                                        type="checkbox"
                                                                        name="working_days[]"
                                                                        value="{{ $day }}"

                                                                        {{ in_array(
                                                                            $day,
                                                                            $empDetails->working_days ?? []
                                                                        ) ? 'checked' : '' }}
                                                                    >

                                                                    <label class="form-check-label">
                                                                        {{ $day }}
                                                                    </label>

                                                                </div>

                                                            @endforeach

                                                        </div>

                                                    </div>

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

                                        {{-- Bank Details --}}
                                        <div class="col-lg-6 mb-4">
                                            <div class="card shadow-sm border-0 h-100">
                                                <div class="card-body">

                                                    <h4 class="fw-bold mb-4">Bank Details</h4>

                                                    <div class="row">

                                                        <div class="col-md-12 mb-3">
                                                            <label>Bank Name</label>
                                                            <input type="text" autocomplete="off"
                                                                name="bank_name"
                                                                class="form-control" value="{{ $empDetails->bank_name ?? ''}}">
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <label>Account Number</label>
                                                            <input type="text" autocomplete="off"
                                                                name="account_number"
                                                                class="form-control" value="{{ $empDetails->account_number ?? ''}}">
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <label>Sort Code</label>
                                                            <input type="text" autocomplete="off"
                                                                name="sort_code"
                                                                class="form-control" value="{{ $empDetails->sort_code ?? ''}}">
                                                        </div>

                                                    </div>

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

                                    </div>

                                    <hr class="section-divider">

                                    {{-- Current Circumstances --}}
                                    <div class="card shadow-sm border-0 mb-4">
                                        <div class="card-body">

                                            <h4 class="fw-bold mb-4">
                                                Your Current Circumstances
                                            </h4>

                                            <div class="form-check mb-3">
                                                <input class="form-check-input"
                                                    type="radio"
                                                    name="circumstance"
                                                    value="1" {{ ($empDetails->circumstance ?? '') == 1 ? 'checked' : '' }}>
                                                <label class="form-check-label">
                                                    A - This is my first job since last 6 April and I have not been receiving taxable Jobseeker’s allowance, employment and support allowance or taxable incapacity benefit or a state pension or occupational pension.
                                                </label>
                                            </div>

                                            <div class="form-check mb-3">
                                                <input class="form-check-input"
                                                    type="radio"
                                                    name="circumstance"
                                                    value="2" {{ ($empDetails->circumstance ?? '') == 2 ? 'checked' : '' }}>
                                                <label class="form-check-label">
                                                    B - This is now my only job, but since last 6 April I have had another job, or have received taxable jobseeker’s allowance or taxable incapacity benefit. I do not receive a state or occupational pension.
                                                </label>
                                            </div>

                                            <div class="form-check mb-3">
                                                <input class="form-check-input"
                                                    type="radio"
                                                    name="circumstance"
                                                    value="3" {{ ($empDetails->circumstance ?? '') == 3 ? 'checked' : '' }}>
                                                <label class="form-check-label">
                                                    C - I have another job or receive a state or occupational pension.
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input"
                                                    type="checkbox"
                                                    name="circumstance"
                                                    value="4" {{ ($empDetails->circumstance ?? '') == 4 ? 'checked' : '' }}>
                                                <label class="form-check-label text-justify">
                                                    D - If you left a course of UK Higher Education before last 6 April and received your first UK student loan instalment on or after 1 September 1998 and you have not fully repaid your student loan, enter ‘X’ in the box D. (Do not enter ‘X’ in the box D if you are repaying your UK student loan by agreement with the UK student loans company to make monthly payments through your bank or building society account). 
                                                </label>
                                            </div>

                                        </div>
                                    </div>

                                    <hr class="section-divider">

                                    {{-- Declaration --}}
                                    <div class="card shadow-sm border-0">
                                        <div class="card-body">

                                            <h4 class="fw-bold mb-4">
                                                Signature & Declaration
                                            </h4>

                                            <p class="mb-4">
                                                I confirm that the information provided above is correct.
                                            </p>

                                            <div class="row">
                                                
                                                <div class="col-md-6 mb-3">
                                                    <label>Date</label>
                                                    <input
                                                        type="text" autocomplete="off"
                                                        name="signature_date"
                                                        class="form-control datepicker"
                                                        value="{{ !empty($empDetails->signature_date)
                                                                    ? date(config('choicescrm.date_format_forms'), strtotime($empDetails->start_date))
                                                                    : '' }}">
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <div class="d-flex justify-content-between align-items-center mb-1">

                                                        <label class="mb-0">
                                                            Your Signature
                                                        </label>

                                                        <a href="javascript:void(0)"
                                                        class="clear-sign"
                                                        id="clear">
                                                            Clear
                                                        </a>

                                                    </div>
                                                    {{-- Always show signature pad --}}
                                                    <div id="sig"></div>

                                                    <textarea
                                                        id="signature64"
                                                        name="signature64"
                                                        class="form-control d-none">{{ $empDetails?->signature64 }}</textarea>
                                                    {{-- Existing Signature Preview --}}
                                                    @if(!empty($empDetails?->signature64))
                                                        <div
                                                            id="existing-signature"
                                                            class="text-center p-2 mb-3"
                                                            style="
                                                                border:1px solid #ddd;
                                                                border-radius:8px;
                                                                background:#fff;
                                                            ">

                                                            <img
                                                                src="{{ $empDetails->signature64 }}"
                                                                alt="Signature"
                                                                style="max-width:100%;max-height:120px;">

                                                        </div>
                                                    @endif
                                                </div>

                                            </div>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <button type="submit"
                                                            class="blue-big-button w-100 px-5">
                                                        Submit
                                                    </button>
                                                </div>
                                                <div class="col-md-8"></div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                {{-- @empty
                                @endforelse --}}

                            </form>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')

<script src="{{ asset('lib/jquery/jquery.min.js') }}"></script>

{{-- REQUIRED --}}
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<script src="{{ asset('js/jquery.signature.min.js') }}"></script>
<script src="{{asset('/lib/bootstrap-datepicker-1.9.0/js/bootstrap-datepicker.min.js')}}"></script>

<script>
$(document).ready(function () {
    $('.datepicker').datepicker({
        autoclose: true,
        format: "{{config('choicescrm.date_format_datepicker')}}"
    });
    $('#sig').signature({
        syncField: '#signature64',
        syncFormat: 'PNG'
    });

    $('#clear').click(function (e) {
        e.preventDefault();

        $('#sig').signature('clear');
        $('#signature64').val('');
    });
   

});

</script>

@endsection