@extends('layouts.app')
@section('content')
<div class="row">
    <div class="col-md-6 col-12 mb-4">
        <div class="card">
            <div class="card-header">
                <h2>Days <small>List</small></h2>
            </div>
            <div class="card-body table-responsive">
                <table id="datatableDays" class="table table-striped table-bordered table-responsive">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Number</th>
                            <th>Name</th>
                            <th>Next</th>
                            <th>Previous</th>
                            <th>Unlock Duration</th>
                            <th>Header Image</th>
                            <th>Active</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($days as $day)
                        <tr>
                            <td>{{ $day->iDayID }}</td>
                            <td>{{ $day->vDay }}</td>
                            <td>{{ $day->vName }}</td>
                            <td>{{ $day->NextDayName }}</td>
                            <td>{{ $day->PreviousDayName }}</td>
                            <td>{{ $day->formattedUnlockDuration() }}</td>
                            <td>
                                @if ($headerImages[$day->vDay] ?? '')
                                <a data-fancybox="gallery" data-src="{{ $headerImages[$day->vDay] }}"
                                    data-caption="{{ $day->vDay }}" class="position-relative d-inline-block"
                                    title="Click to view full size"><img src="{{ $headerImages[$day->vDay] }}"
                                        width="{{ config('constants.backgroundimg.thumb_width') }}"
                                        height="{{ config('constants.backgroundimg.thumb_height') }}"
                                        alt="{{ $day->vDay }}" class="img-fluid"
                                        onerror="this.style.display='none'; this.parentElement.textContent='No Image';"></a>
                                @else
                                No Image
                                @endif
                            </td>
                            <td>
                                <input type="hidden" class="active-toggle-hidden" value="0"
                                    data-id="{{ $day->iDayID }}">
                                <input {{Auth::guard('admin')->user()->bContent == 1 ? '':'disabled'}} type="checkbox"
                                class="js-switch active-toggle" data-id="{{ $day->iDayID }}"
                                value="1" {{ $day->bActive ? 'checked' : '' }} />
                            </td>
                            <td>
                                @if (Auth::guard('admin')->user()->bContent == 1)
                                <button type="button" class="btn btn-info btn-xs text-nowrap edit-day"
                                    data-id="{{ $day->iDayID }}" data-number="{{ $day->vDay }}"
                                    data-name="{{ $day->vName }}" data-next="{{ $day->iNextDayID }}"
                                    data-previous="{{ $day->iPreviousDayID }}" data-unlock="{{ $day->dUnlockIn }}"
                                    data-header-img="{{ $headerImages[$day->vDay] ?? '' }}">
                                    <i class="fa fa-pencil"></i> Edit
                                </button>
                                <button type="button" class="btn btn-danger btn-xs text-nowrap daydelete"
                                    data-name="{{ $day->vName }}" data-id="{{ $day->iDayID }}">
                                    <i class="fa fa-trash-o"></i> Delete
                                </button>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

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

    <div class="col-md-6 col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h2 id="form-title">Create <small>Day</small></h2>
            </div>
            <div class="card-body" id="createDaysForm">
                <form id="frmdays" name="frmdays" method="post" enctype="multipart/form-data"
                    action="{{ route('day.store', ['program_id' => $programId]) }}">
                    @csrf
                    <input type="hidden" name="_method" id="form-method" value="POST">
                    <input type="hidden" name="day_id" id="day_id" value="">
                    <input type="hidden" id="form-mode" value="create">

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label">Number<span class="text-danger asterisk">*</span></label>
                        <div class="col-md-9">
                            <input id="days_number" name="days_number" type="number" class="form-control"
                                placeholder="Number" value="{{ old('days_number') }}">
                            @error('days_number')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label">Name<span class="text-danger asterisk">*</span></label>
                        <div class="col-md-9">
                            <input id="days_name" name="days_name" type="text" class="form-control" placeholder="Name"
                                value="{{ old('days_name') }}">
                            @error('days_name')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label">Header Image</label>
                        <div class="col-md-9">
                            <input type="file" id="vHeaderImg" name="vHeaderImg" class="form-control-file"
                                accept="image/png">
                            <a id="vHeaderImgLink" href="#" target="_blank" class="pull-right d-none">Image
                                Link</a>
                            <small class="form-text text-muted">Must be under 100KB. Only png format is
                                allowed.</small>
                            <span id="vHeaderImgError" class="text-danger" style="display:none;"></span>
                            @error('vHeaderImg')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label">Previous Day</label>
                        <div class="col-md-9">
                            <select id="previous_day" name="previous_day" class="form-control">
                                <option value="">Select Previous Day</option>
                                @php
                                $activeDays = $days->where('bActive', 1);
                                $inactiveDays = $days->where('bActive', 0);
                                @endphp
                                @if ($activeDays->isNotEmpty())
                                <optgroup label="Active Days">
                                    @foreach ($activeDays as $tDay)
                                    <option value="{{ $tDay->iDayID }}" {{ old('previous_day')==$tDay->iDayID ?
                                        'selected' : '' }}>
                                        {{ $tDay->vDay }}</option>
                                    @endforeach
                                </optgroup>
                                @endif

                                @if ($inactiveDays->isNotEmpty())
                                <optgroup label="Inactive Days">
                                    @foreach ($inactiveDays as $tDay)
                                    <option value="{{ $tDay->iDayID }}" {{ old('previous_day')==$tDay->iDayID ?
                                        'selected' : '' }}>
                                        {{ $tDay->vDay }}</option>
                                    @endforeach
                                </optgroup>
                                @endif
                            </select>
                            @error('previous_day')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label">Next Day</label>
                        <div class="col-md-9">
                            <select id="next_day" name="next_day" class="form-control">
                                <option value="">Select Next Day</option>
                                @php
                                $activeDays = $days->where('bActive', 1);
                                $inactiveDays = $days->where('bActive', 0);
                                @endphp
                                @if ($activeDays->isNotEmpty())
                                <optgroup label="Active Days">
                                    @foreach ($activeDays as $tDay)
                                    <option value="{{ $tDay->iDayID }}" {{ old('next_day')==$tDay->iDayID ? 'selected' :
                                        '' }}>
                                        {{ $tDay->vDay }}</option>
                                    @endforeach
                                </optgroup>
                                @endif

                                @if ($inactiveDays->isNotEmpty())
                                <optgroup label="Inactive Days">
                                    @foreach ($inactiveDays as $tDay)
                                    <option value="{{ $tDay->iDayID }}" {{ old('next_day')==$tDay->iDayID ? 'selected' :
                                        '' }}>
                                        {{ $tDay->vDay }}</option>
                                    @endforeach
                                </optgroup>
                                @endif
                            </select>
                            @error('next_day')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label">Unlock Duration<span
                                class="text-danger asterisk">*</span></label>
                        <div class="col-md-9">
                            <input type="text" readonly="readonly" id="widget" placeholder="Click here..."
                                class="form-control" />
                            <input type="hidden" name="dUnlockIn" value="{{ old('dUnlockIn', '43200') }}"
                                id="seconds" />
                            @error('dUnlockIn')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <hr>
                    <div class="form-group row">
                        <div class="col-md-9 offset-md-3">
                            @if (Auth::guard('admin')->user()->bContent == 1)
                            <button type="button" id="btn-reset" class="btn btn-secondary">Cancel</button>
                            <button type="submit" id="btn-submit" class="btn btn-success">Create</button>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete <span id="dayName"></span>?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Keep</button>
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Wait for the plugins to be loaded
        document.addEventListener('plugins-loaded', function() {
            initializeComponents();
        });

        // Fallback in case the event doesn't fire
        setTimeout(function() {
            initializeComponents();
        }, 2000);

        function initializeComponents() {
            // Make this function idempotent: prevent double-initialization which can
            // attach duplicate event handlers (causing handlers to run twice).
            if (initializeComponents._initialized) return;
            initializeComponents._initialized = true;

            // Check if jQuery is properly loaded
            if (window.jQuery && typeof $.fn.timeDurationPicker === 'function') {

                // Initialize DataTable
                if (!$.fn.DataTable.isDataTable('#datatableDays')) {
                    $("#datatableDays").DataTable({
                        "pageLength": 50,
                        "order": [
                            [1, "asc"]
                        ],
                        columnDefs: [{
                            targets: '_all',
                            orderSequence: ['asc', 'desc']
                        }],
                    });
                }

                $('#widget').timeDurationPicker({
                    years: false,
                    months: false,
                    days: true,
                    hours: true,
                    minutes: true,
                    seconds: true,
                    defaultValue: function() {
                        return parseInt($('#seconds').val(), 10);
                    },
                    onSelect: function(element, seconds, duration, text) {
                        $('#seconds').val(seconds);
                        $('#widget').val(text);
                    }
                });

                validateFileSize('vHeaderImg', 100, 'vHeaderImgError', ['image/png']);

                // Edit button functionality (use event delegation for DataTables pagination)
                $('#datatableDays').on('click', '.edit-day', function() {
                    // Update form title
                    $('#form-title').html('Edit <small>Day</small>');
                    $('#form-mode').val('edit');
                    // Get data attributes
                    const id = $(this).data('id');
                    const number = $(this).data('number');
                    const name = $(this).data('name');
                    const next = $(this).data('next');
                    const previous = $(this).data('previous');
                    const unlock = $(this).data('unlock');

                    // Change form to PUT method
                    $('#form-method').val('PUT');
                    $('#day_id').val(id);

                    // Update form action URL
                    const updateUrl = "{{ route('day.index', $programId) }}/" + id;
                    $('#frmdays').attr('action', updateUrl);

                    // Set form values
                    $('#days_number').val(number);
                    $('#days_name').val(name);
                    // Clear previous selections and set the new ones for dropdowns
                    $('#next_day option').prop('selected', false);
                    $('#previous_day option').prop('selected', false);

                    if (next) {
                        $('#next_day option[value="' + next + '"]').prop('selected', true);
                    }

                    if (previous) {
                        $('#previous_day option[value="' + previous + '"]').prop('selected', true);
                    }
                    $('#seconds').val(unlock);
                    // Completely remove and reinitialize the time duration picker
                    if ($('#widget').data('timeDurationPicker')) {
                        $('#widget').timeDurationPicker('destroy');
                    }

                    // Remove the input and recreate it
                    const widgetParent = $('#widget').parent();
                    $('#widget').remove();
                    widgetParent.prepend(
                        '<input type="text" readonly="readonly" id="widget" placeholder="Click here..." class="form-control" />'
                    );

                    // Initialize time duration picker with new values
                    $('#widget').timeDurationPicker({
                        years: false,
                        months: false,
                        days: true,
                        hours: true,
                        minutes: true,
                        seconds: true,
                        defaultValue: function() {
                            return parseInt(unlock, 10);
                        },
                        onSelect: function(element, seconds, duration, text) {
                            $('#seconds').val(seconds);
                            $('#widget').val(text);
                        }
                    });

                    // Show/hide header image link
                    const headerImg = $(this).data('header-img');
                    if (headerImg) {
                        $('#vHeaderImgLink').attr('href', headerImg).removeClass('d-none');
                    } else {
                        $('#vHeaderImgLink').attr('href', '#').addClass('d-none');
                    }

                    // Change submit button text
                    $('#btn-submit').text('Save Changes');
                    // Scroll to form and focus
                    $('#createDaysForm')[0].scrollIntoView({
                        behavior: 'smooth'
                    });
                });

                // Reset button functionality
                $('#btn-reset').off('click').on('click', function() {
                    // Reset form to create mode
                    resetForm();
                });

                function resetForm() {
                    // Reset form title
                    $('#form-title').html('Create <small>Day</small>');
                    $('#form-mode').val('create');
                    // Reset form method and action
                    $('#form-method').val('POST');
                    $('#day_id').val('');
                    $('#frmdays').attr('action', "{{ route('day.store', ['program_id' => $programId]) }}");
                    document.querySelectorAll('.text-danger:not(.asterisk)').forEach(function(element) {
                        element.style.display = 'none';
                    });
                    $('#vHeaderImg').val('');
                    $('#vHeaderImgLink').attr('href', '#').addClass('d-none');
                    // Clear form values
                    $('#days_number').val('');
                    $('#days_name').val('');
                    $('#next_day').val('');
                    $('#previous_day').val('');
                    $('#seconds').val('43200');
                    // Recreate widget
                    const widgetParent = $('#widget').parent();
                    $('#widget').remove();
                    widgetParent.prepend(
                        '<input type="text" readonly="readonly" id="widget" placeholder="Click here..." class="form-control" />'
                    );

                    // Reinitialize with default value
                    $('#widget').timeDurationPicker({
                        years: false,
                        months: false,
                        days: true,
                        hours: true,
                        minutes: true,
                        seconds: true,
                        defaultValue: function() {
                            return 43200;
                        },
                        onSelect: function(element, seconds, duration, text) {
                            $('#seconds').val(seconds);
                            $('#widget').val(text);
                        }
                    });
                    // Reset submit button text
                    $('#btn-submit').text('Create');
                }

                // Set up delete confirmation modal (use event delegation for DataTables pagination)
                $('#datatableDays').on('click', '.daydelete', function() {
                    const id = $(this).data('id');
                    const name = $(this).data('name');
                    $('#dayName').text(name);
                    $('#deleteForm').attr('action', "{{ route('day.index', $programId) }}/" + id);
                    $('#deleteModal').modal('show');
                });

                // Toggle active status via AJAX (use event delegation for DataTables pagination)
                $('#datatableDays').on('change', '.active-toggle', function(e) {
                    const $checkbox = $(this);

                    // prevent double click
                    if ($checkbox.data('loading')) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        return false;
                    }
                    $checkbox.data('loading', true);

                    const id = $checkbox.data('id');
                    const isChecked = $checkbox.prop('checked');

                    // Find the switchery wrapper (span.switchery) next to the checkbox
                    const $switchWrapper = $checkbox.next('.switchery');

                    if ($switchWrapper.length) {
                        $switchWrapper.hide();
                        $switchWrapper.after('<i class="fa fa-spinner fa-spin text-muted switch-spinner" data-id="' + id + '"></i>');
                    }


                    // Send AJAX request
                    $.ajax({
                        url: "{{ route('day.activeToggle', ['program_id' => $programId, 'id' => '__ID__']) }}".replace('__ID__', id),
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        // Send the desired final state so the endpoint is idempotent
                        data: { bActive: isChecked ? 1 : 0 },
                        dataType: 'json',
                        success: function(response) {
                            if (response.success) {
                                // Update checkbox state
                                $checkbox.prop('checked', response.bActive ? true : false);
                                showNotification('Day status updated successfully', 'success');
                            } else {
                                // Revert checkbox on logical failure
                                $checkbox.prop('checked', !isChecked);
                                showNotification('Unable to update day status', 'danger');
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Error toggling day status:', error);
                            // Revert checkbox on error
                            $checkbox.prop('checked', !isChecked);
                            showNotification('Error updating day status. Please try again.', 'danger');
                        },
                        complete: function () {
                            $checkbox.data('loading', false);
                            // Remove spinner
                            $('.switch-spinner[data-id="' + id + '"]').remove();
                            // Rebuild the Switchery so its visual position matches the
                            // checkbox's current checked state (Switchery keeps its own
                            // visual state, so .prop('checked', ...) alone won't revert it).
                            refreshSwitchery($checkbox[0]);
                        }
                    });
                });

                // `showNotification` and `refreshSwitchery` are defined globally in
                // resources/js/app.js and shared across the course list pages.

                // Initialize Fancybox
                Fancybox.bind("[data-fancybox]", {
                    // Custom options if needed
                });
            } else {
                console.error('Required plugins are not loaded properly');
                console.log('jQuery available:', typeof $ !== 'undefined');
                console.log('jQuery UI available:', typeof $.ui !== 'undefined');
                console.log('timeDurationPicker available:', typeof $.fn.timeDurationPicker === 'function');
            }
        }
</script>
@endpush