@extends('layouts.app')

@section('content')
<div class="app sidebar-mini">
    <div class="page">
        <div class="page-main">
            <div class="app-content main-content">
                <div class="side-app">
                    @include('layouts.appheader')

                    <div class="containersection">
                        <div class="page-header">
                            <div class="flashmsgec">
                                @include('layouts.flashmsg')
                            </div>
                        </div>

                        <div class="card carddivision">
                            <div class="card-header">
                                <div class="card-title">Outbound Call Settings</div>
                            </div>

                            <div class="card-body">
                                @if ($errors->any())
                                    <div class="emperrmsg">
                                        <ul class="mb-0">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                            <i class="fe fe-x" id="emperrmsgclose"></i>
                                        </ul>
                                    </div>
                                @endif

                                <form action="{{ route('user.call.settings.update') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="user_timezone" id="user_timezone"/>

                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Day</th>
                                                    <th>Start Time</th>
                                                    <th>End Time</th>
                                                    <th>Enabled</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    //$days = ['monday','tuesday','wednesday','thursday','friday','saturday','sunday'];
                                                    $days = ['monday','tuesday','wednesday','thursday','friday','saturday'];
                                                    $settings = $call_settings->keyBy('day_of_week');
                                                @endphp

                                                @foreach($days as $day)
                                                    @php
                                                        $setting = $settings->get($day);
                                                    @endphp
                                                    <tr>
                                                        <td>{{ ucfirst($day) }}</td>
                                                        <td>
                                                            <input type="time" name="settings[{{ $day }}][start_time]"
                                                                value="{{ old("settings.$day.start_time", $setting->start_time ?? '') }}"
                                                                class="form-control">
                                                        </td>
                                                        <td>
                                                            <input type="time" name="settings[{{ $day }}][end_time]"
                                                                value="{{ old("settings.$day.end_time", $setting->end_time ?? '') }}"
                                                                class="form-control">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="checkbox" name="settings[{{ $day }}][enabled]"
                                                                value="1" {{ old("settings.$day.enabled", $setting->enabled ?? false) ? 'checked' : '' }}>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="text-end">
                                        <button type="submit" class="btn btn-primary">Save Settings</button>
                                    </div>
                                </form>
                            </div>
                        </div>

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

            @include('layouts.appfooter')
        </div>
    </div>

    <a href="#top" id="back-to-top"><i class="fe fe-chevrons-up"></i></a>
</div>

@include('includes.jslinks_common')
<script>
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    $('#user_timezone').val(timezone)

    $(document).ready(function () {
    $('form').on('submit', function (e) {
        let isValid = true;
        let errorMessages = [];

        @foreach($days as $day)
            let isEnabled_{{ $day }} = $('[name="settings[{{ $day }}][enabled]"]').is(':checked');
            let startTime_{{ $day }} = $('[name="settings[{{ $day }}][start_time]"]').val();
            let endTime_{{ $day }} = $('[name="settings[{{ $day }}][end_time]"]').val();

            if (isEnabled_{{ $day }}) {
                if (!startTime_{{ $day }} || !endTime_{{ $day }}) {
                    isValid = false;
                    errorMessages.push("Start and end time are required for {{ ucfirst($day) }}");
                } else {
                    // Validate that start time is before end time
                    let startParts = startTime_{{ $day }}.split(':');
                    let endParts = endTime_{{ $day }}.split(':');

                    let start = new Date();
                    start.setHours(parseInt(startParts[0]), parseInt(startParts[1]), 0);

                    let end = new Date();
                    end.setHours(parseInt(endParts[0]), parseInt(endParts[1]), 0);

                    if (start >= end) {
                        isValid = false;
                        errorMessages.push("Start time must be before end time for {{ ucfirst($day) }}");
                    }
                }
            }
        @endforeach

        if (!isValid) {
            e.preventDefault();
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                html: '<ul><li>' + errorMessages.join('</li><li>') + '</li></ul>',
            });
        }
    });
});
</script>
@endsection