@extends('layouts.app', ['title' => __('Customers')])

@section('admin_title')
{{ __('Add Job Type') }}
@endsection

@section('content')

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">

<style>
body { font-family: inherit; }

.nav-tabs .nav-link {
    color: #555;
    font-weight: 500;
}
.nav-tabs .nav-link.active {
    background-color: #05A9C5;
    color: #fff;
    border-radius: 6px 6px 0 0;
}

.custom-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.badge-yes {
    background: #28a745;
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
}
.badge-no {
    background: #dee2e6;
    color: #555;
    padding: 4px 10px;
    border-radius: 20px;
}

.btn-sm {
    border-radius: 6px;
}

.form-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.overtime-rule-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap; /* optional for responsiveness */
}

.overtime-rule-row .form-check {
    margin: 0;
}

.rule-label {
    min-width: 250px;
}

.hours-input input {
    width: 80px;
}

.overtime-hours-label {
    font-size: 13px;
    color: #666;
}

.overtime-rule-row .rule-label {
    flex: 1;
    font-size: 14px;
    color: #444;
    font-weight: 500;
}
.overtime-rule-row .hours-input {
    width: 90px;
}
.overtime-rule-row .hours-input input {
    text-align: center;
}
.overtime-hours-label {
    font-size: 13px;
    color: #777;
    white-space: nowrap;
}
</style>
{{-- ================= STYLES ================= --}}
<style>
.overtime-rule-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
}

.overtime-rule-row .form-check-input {
    margin-top: 0;
}

.rule-label {
    flex: 1;
    min-width: 220px;
    font-size: 14px;
}

.overtime-hours {
    width: 90px;
}

.overtime-hours-label {
    font-size: 13px;
    color: #666;
}

/* Mobile friendly */
@media (max-width: 576px) {
    .overtime-rule-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .overtime-hours {
        width: 100%;
    }
}
</style>
<div class="header bg-gradient-primary pb-8 pt-5"></div>

<div class="container mt-5">

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#jobtype">Job Types</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#shifts">Shifts</a>
        </li>
    </ul>

    <div class="tab-content mt-4">

        {{-- JOB TYPES --}}
        <div class="tab-pane fade show active" id="jobtype">

            {{-- FORM --}}
            <div class="card custom-card p-4 mb-4">
                <h4 id="formTitle">Add Job Type</h4>

                <form id="jobTypeForm" action="{{ route('job-types.store') }}" method="POST">
                    @csrf
                    {{-- Hidden method field: empty by default, set to PUT on edit --}}
                    <input type="hidden" name="_method" id="formMethod" value="">

                    <div class="form-group">
                        <label class="font-weight-bold">Job Type</label>
                        <input type="text" name="job_type" id="job_type" class="form-control" required>
                    </div>

                    {{-- TIME CLOCK SETTINGS --}}
                    <div class="form-section">
                        <div class="section-title">Time Clock Settings</div>

                        <div class="form-check mb-2">
                            <input type="checkbox"
                                   name="time_clock_required"
                                   id="time_clock_required"
                                   value="1"
                                   class="form-check-input">
                            <label class="form-check-label" for="time_clock_required">
                                Time Clock Required
                            </label>
                        </div>

                        <div class="form-check mb-2">
                            <input type="checkbox"
                                   name="password_required"
                                   id="password_required"
                                   value="1"
                                   class="form-check-input">
                            <label class="form-check-label" for="password_required">
                                Password Required
                            </label>
                        </div>

                        <div class="form-check mb-2">
                            <input type="checkbox"
                                   name="time_shifts_allowed"
                                   id="time_shifts_allowed"
                                   value="1"
                                   class="form-check-input">
                            <label class="form-check-label" for="time_shifts_allowed">
                                Time Shifts Allowed
                            </label>
                        </div>
                    </div>

                    {{-- FOODYMAXX ACCESS --}}
                    <div class="form-section">
                        <div class="section-title">FoodyMaxx Access</div>

                        <div class="form-check mb-2">
                            <input type="checkbox"
                                   name="bzcomposer_access"
                                   id="bzcomposer_access"
                                   value="1"
                                   class="form-check-input">
                            <label class="form-check-label" for="bzcomposer_access">
                                FoodyMaxx Access
                            </label>
                        </div>

                        <div class="form-check mb-2">
                            <input type="checkbox"
                                   name="id_password_required"
                                   id="id_password_required"
                                   value="1"
                                   class="form-check-input">
                            <label class="form-check-label" for="id_password_required">
                                ID / Password Required
                            </label>
                        </div>
                    </div>

                    {{-- FEATURE ACCESS --}}
                    <div class="form-section">
                        <div class="section-title">Feature Access</div>

                        <div class="row">
                            @foreach(['CUSTOMER','ITEM','SERVICE','SALES','PURCHASE','POS'] as $f)
                            <div class="col-md-4 mb-2">
                                <div class="form-check">
                                    <input type="checkbox"
                                           name="feature_access[]"
                                           class="feature_access form-check-input"
                                           value="{{ $f }}"
                                           id="feature_{{ $f }}">
                                    <label class="form-check-label" for="feature_{{ $f }}">
                                        {{ $f }}
                                    </label>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- OVERTIME RULES --}}
                    <div>
                        

                      {{-- ================= OVERTIME RULES ================= --}}
<div class="form-section">
    <div class="section-title">Overtime Rules</div>
    <p class="text-muted" style="font-size:13px;">
        Enable a rule and set the threshold hours that trigger overtime.
    </p>

    {{-- Rule 1 --}}
    <div class="overtime-rule-row">
        <input type="checkbox"
               name="overtime_rules[1][enabled]"
               value="1"
               class="form-check-input overtime-checkbox"
               id="ot_rule_1"
               data-target="ot_hours_1">

        <label class="rule-label mb-0" for="ot_rule_1">
            <strong>Rule 1</strong> — Over daily working hours
        </label>

        <input type="number"
               name="overtime_rules[1][hours]"
               id="ot_hours_1"
               class="form-control form-control-sm overtime-hours"
               min="0" max="24"
               value="8"
               placeholder="Hrs">

        <span class="overtime-hours-label">hrs / day</span>
    </div>

    {{-- Rule 2 --}}
    <div class="overtime-rule-row">
        <input type="checkbox"
               name="overtime_rules[2][enabled]"
               value="1"
               class="form-check-input overtime-checkbox"
               id="ot_rule_2"
               data-target="ot_hours_2">

        <label class="rule-label mb-0" for="ot_rule_2">
            <strong>Rule 2</strong> — Saturday or Sunday working hours
        </label>

        <input type="number"
               name="overtime_rules[2][hours]"
               id="ot_hours_2"
               class="form-control form-control-sm overtime-hours"
               min="0" max="24"
               value="0"
               placeholder="Hrs">

        <span class="overtime-hours-label">hrs / day</span>
    </div>

    {{-- Rule 3 --}}
    <div class="overtime-rule-row">
        <input type="checkbox"
               name="overtime_rules[3][enabled]"
               value="1"
               class="form-check-input overtime-checkbox"
               id="ot_rule_3"
               data-target="ot_hours_3">

        <label class="rule-label mb-0" for="ot_rule_3">
            <strong>Rule 3</strong> — Holiday working hours
        </label>

        <input type="number"
               name="overtime_rules[3][hours]"
               id="ot_hours_3"
               class="form-control form-control-sm overtime-hours"
               min="0" max="24"
               value="0"
               placeholder="Hrs">

        <span class="overtime-hours-label">hrs / day</span>
    </div>
</div>
                    </div>

                    <div class="mt-4" style="text-align: end;">
                        <button type="submit" id="formSubmitBtn" class="btn btn-primary">
                            Save Role
                        </button>
                        <button type="button" id="formCancelBtn" class="btn btn-light d-none">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>

            {{-- TABLE --}}
            <div class="card custom-card p-4">
                <h4 class="mb-3">Job Types List</h4>

                <div class="table-responsive">
                    <table id="jobTypesTable" class="table table-hover">
                        <thead>
                            <tr>
                                <th>Job Type</th>
                                <th>Clock</th>
                                <th>PW</th>
                                <th>Shifts</th>
                                <th>Access</th>
                                <th>ID/PW</th>
                                <th>Features</th>
                                <th>OT Rules</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($jobTypes as $job)
                            @php
                                $otRules = $job->overtime_rules
                                    ? json_decode($job->overtime_rules, true)
                                    : [];
                            @endphp
                            <tr>
                                <td>{{ $job->job_type }}</td>

                                <td><span class="{{ $job->time_clock_required  ? 'badge-yes':'badge-no' }}">{{ $job->time_clock_required  ? 'Yes':'No' }}</span></td>
                                <td><span class="{{ $job->password_required    ? 'badge-yes':'badge-no' }}">{{ $job->password_required    ? 'Yes':'No' }}</span></td>
                                <td><span class="{{ $job->time_shifts_allowed  ? 'badge-yes':'badge-no' }}">{{ $job->time_shifts_allowed  ? 'Yes':'No' }}</span></td>
                                <td><span class="{{ $job->bzcomposer_access    ? 'badge-yes':'badge-no' }}">{{ $job->bzcomposer_access    ? 'Yes':'No' }}</span></td>
                                <td><span class="{{ $job->id_password_required ? 'badge-yes':'badge-no' }}">{{ $job->id_password_required ? 'Yes':'No' }}</span></td>

                                <td>
                                    <span class="badge badge-info">{{ $job->feature_access }}</span>
                                </td>

                                <td>
                                    @forelse($otRules as $rNum => $rData)
                                        @if(!empty($rData['enabled']))
                                            <span class="badge badge-warning">
                                                R{{ $rNum }}: {{ $rData['hours'] }}h
                                            </span>
                                        @endif
                                    @empty
                                        <span class="text-muted" style="font-size:12px;">None</span>
                                    @endforelse
                                </td>

                                <td>
                                    <button class="btn btn-info btn-sm editBtn"
                                            data-id="{{ $job->id }}">
                                        Edit
                                    </button>

                                    <form action="{{ route('job-types.destroy', $job->id) }}"
                                          method="POST"
                                          style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-danger btn-sm"
                                                onclick="return confirm('Delete this?')">
                                            Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

        {{-- SHIFTS --}}
        <div class="tab-pane fade" id="shifts">

            <div class="card custom-card p-4">
                <div class="d-flex justify-content-between mb-3">
                    <h4>Shifts List</h4>
                    <a href="{{ route('shift.create') }}" class="btn btn-primary">Create Shift</a>
                </div>

                @if($shifts->count())
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Name</th>
                            <th>Start</th>
                            <th>End</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($shifts as $s)
                        <tr>
                            <td>{{ $s->date }}</td>
                            <td>{{ $s->name }}</td>
                            <td>{{ \Carbon\Carbon::parse($s->start_time)->format('H:i') }}</td>
                            <td>{{ \Carbon\Carbon::parse($s->end_time)->format('H:i') }}</td>
                            <td>
                                <a href="{{ route('shift.edit',$s->id) }}"
                                   class="btn btn-sm btn-primary">Edit</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <div class="alert alert-info">No shifts found</div>
                @endif
            </div>

        </div>

    </div>

    @include('layouts.footers.auth')
</div>


{{-- SCRIPTS --}}
{{-- jQuery MUST come before DataTables and before your script --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

<script>
// Store URLs in JS variables first — rendered by Blade at page load time
var editBaseUrl   = "{{ url('job-types/edit') }}";
var updateBaseUrl = "{{ url('job-types/update') }}";
var storeUrl      = "{{ route('job-types.store') }}";

// Wait for full DOM + scripts to be ready
$(document).ready(function() {

    // Init DataTable
    if ($.fn.DataTable) {
        $('#jobTypesTable').DataTable();
    }

    // ── Edit button
    // Use $(document) so it works even after DataTables re-renders rows
    $(document).on('click', '.editBtn', function(e) {
        e.preventDefault();

        var id = $(this).data('id');

        if (!id) {
            alert('No ID found on this button.');
            return;
        }

        $.ajax({
            url: editBaseUrl + '/' + id,
            type: 'GET',
            dataType: 'json',
            success: function(data) {

                // UI labels
                $('#formTitle').text('Edit Job Type');
                $('#formSubmitBtn').text('Update Role');
                $('#formCancelBtn').removeClass('d-none');

                // Form action + PUT method spoof
                $('#jobTypeForm').attr('action', updateBaseUrl + '/' + id);
                $('#formMethod').val('POST');

                // Basic fields
                $('#job_type').val(data.job_type || '');

                $('#time_clock_required').prop('checked',  parseInt(data.time_clock_required)  === 1);
                $('#password_required').prop('checked',    parseInt(data.password_required)    === 1);
                $('#time_shifts_allowed').prop('checked',  parseInt(data.time_shifts_allowed)  === 1);
                $('#bzcomposer_access').prop('checked',    parseInt(data.bzcomposer_access)    === 1);
                $('#id_password_required').prop('checked', parseInt(data.id_password_required) === 1);

                // Feature access
                $('.feature_access').prop('checked', false);
                if (data.feature_access) {
                    data.feature_access.split(',').forEach(function(f) {
                        f = f.trim();
                        if (f) {
                            $(".feature_access[value='" + f + "']").prop('checked', true);
                        }
                    });
                }

                // Overtime rules
                var otRules = {};
                if (data.overtime_rules) {
                    if (typeof data.overtime_rules === 'string') {
                        try { otRules = JSON.parse(data.overtime_rules); }
                        catch(e) { otRules = {}; }
                    } else {
                        otRules = data.overtime_rules;
                    }
                }

                // Reset all rule rows first
                [1, 2, 3].forEach(function(rNum) {
                    $('#ot_rule_'  + rNum).prop('checked', false);
                    $('#ot_hours_' + rNum).val(rNum === 1 ? 8 : 0);
                });

                // Apply saved values
                $.each(otRules, function(rNum, rData) {
                    if (!rData) return;
                    $('#ot_rule_'  + rNum).prop('checked', parseInt(rData.enabled) === 1);
                    $('#ot_hours_' + rNum).val(
                        (rData.hours !== undefined && rData.hours !== null)
                            ? rData.hours
                            : (rNum == 1 ? 8 : 0)
                    );
                });

                // Scroll to form
                $('html, body').animate({
                    scrollTop: $('#jobTypeForm').offset().top - 100
                }, 500);
            },
            error: function(xhr, status, error) {
                console.error('AJAX error:', status, error, xhr.responseText);
                alert('Could not load record. Status: ' + xhr.status + '\nCheck browser console for details.');
            }
        });
    });

    // ── Cancel button
    $('#formCancelBtn').on('click', function() {
        $('#jobTypeForm')[0].reset();

        $('#formTitle').text('Add Job Type');
        $('#formSubmitBtn').text('Save Role');
        $(this).addClass('d-none');

        $('#jobTypeForm').attr('action', storeUrl);
        $('#formMethod').val('');

        $('#ot_hours_1').val(8);
        $('#ot_hours_2').val(0);
        $('#ot_hours_3').val(0);
        $('#ot_rule_1, #ot_rule_2, #ot_rule_3').prop('checked', false);
    });

});
</script>

@endsection