@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">
                    <!--app header-->
                    @include('layouts.appheader')
                    <!--/app header-->
                    <div class="containersection">
                        <!--Page header-->
                        <div class="page-header">
                            <div class="page-leftheader"></div>
                            <div class="flashmsgec">
                                @include('layouts.flashmsg')
                            </div>
                            <div class="page-rightheader"></div>
                        </div>
                        <!--End Page header-->
                        <div class="card carddivision">
                            <div class="row">
                                <!-- Side Menu Bar Start -->
                                <div class="ringimaimenubar col-lg-1 col-md-1 col-sm-1 col-xs-1">
                                    @include('layouts.sidemenubar')
                                </div>
                                <!-- Side Menu Bar End -->
                                <!-- Main View Start -->
                                <div class="ringimaimain col-lg-11 col-md-11 col-sm-11 col-xs-11">
                                    <div class="row">
                                        <div class="cardleft col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="card carddivision">
                                                <div class="card-header mb-4">
                                                    <div class="card-title">Outbound Call Settings</div>
                                                </div>
                                                <div class="card-body cardbody">
                                                    @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="settingsec col-lg-12 col-md-12 col-sm-12 col-xs-12 px-0">
                                                            @php
                                                                $days = ['monday','tuesday','wednesday','thursday','friday','saturday','sunday'];
                                                                $settings = $call_settings->keyBy('day_of_week');
                                                            @endphp
                                                            <div class="row">
                                                                @foreach($days as $day)
                                                                    @php
                                                                        $setting = $settings->get($day);
                                                                    @endphp
                                                                    <div class="settingcardsec col-lg-3 col-md-6 col-sm-12 col-xs-12">
                                                                        <div class="settingcard col-lg-12 col-md-12 col-sm-12 col-xs-12 px-0">
                                                                            <div class="settingcardhead col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                                <h2><span class="material-symbols-outlined">calendar_today</span>&nbsp;&nbsp;{{ ucfirst($day) }}</h2>
                                                                                <input type="checkbox" name="settings[{{ $day }}][enabled]" value="1" {{ old("settings.$day.enabled", $setting?->enabled ?? false) ? 'checked' : '' }} {{ empty($allow_outbound_edit) ? 'disabled' : '' }}/>
                                                                            </div>
                                                                            <div class="settingcardsettimesec col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                                <div class="row">
                                                                                    <!-- <div class="settingcardsettime col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                                                                        <div class="form-group">
                                                                                            <label class="form-label1">Start Time</label>
                                                                                            <input type="time" name="settings[{{ $day }}][start_time]" value="{{ old("settings.$day.start_time", $setting->start_time ?? '') }}" class="form-control" placeholder="TIme">
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="settingcardsettime col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                                                                        <div class="form-group">
                                                                                            <label class="form-label2">End Time</label>
                                                                                            <input type="time" name="settings[{{ $day }}][end_time]" value="{{ old("settings.$day.end_time", $setting->end_time ?? '') }}" class="form-control" placeholder="TIme">
                                                                                        </div>
                                                                                    </div> -->
                                                                                    <div class="settingcardsettime col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                                                                        <div class="form-group">
                                                                                            <label class="form-label1">Start Time</label>
                                                                                            <input type="text" name="settings[{{ $day }}][start_time]" value="{{ old("settings.$day.start_time", $setting?->start_time ? \Carbon\Carbon::parse($setting?->start_time)->format('g:i A') : '') }}" class="form-control timepicker" placeholder="Select Time" {{ empty($allow_outbound_edit) ? 'disabled' : '' }}/>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="settingcardsettime col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                                                                        <div class="form-group">
                                                                                            <label class="form-label2">End Time</label>
                                                                                            <input type="text" name="settings[{{ $day }}][end_time]" value="{{ old("settings.$day.end_time", $setting?->end_time ? \Carbon\Carbon::parse($setting?->end_time)->format('g:i A') : '') }}" class="form-control timepicker" placeholder="Select Time" {{ empty($allow_outbound_edit) ? 'disabled' : '' }}/>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                        @if($allow_outbound_edit == 1)
                                                        <div class="settingcardbtn col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                                                            <div class="form-group">
                                                                <button type="submit" class="savebtn"><i class="fe fe-save"></i>&nbsp;&nbsp;Save</button>
                                                            </div>
                                                        </div>
                                                        @endif
                                                        <!-- <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>
                                <!-- Main View End -->
                            </div>
                            <!-- <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
                                    <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>
    var args = {
        // format: true,
        // minTime: '2:00 am',
        // maxTime: '1:00 pm',
        // meridiem: false
    };
    document.querySelectorAll("input.timepicker").forEach(function(element) {
        new timepicker(element, args);
    });
    function timepicker(element, args) {
        this.initialized = false;
        this.element = null;
        this.elements = {};
        this.timepicker = null;
        this.time = new Date();
        this.settings = {
            format: true,
            meridiem: true,
            minTime: new Date(new Date().toDateString() + " 00:00"),
            maxTime: new Date(new Date().toDateString() + " 24:00"),
            onChange: false
        };
        this.active = false;
    
        this.updateSettings = function (args) {
            args = args || {};
    
            for (a = 0; a < Object.keys(args).length; a++) {
                var key = Object.keys(args)[a];
                var val = args[Object.keys(args)[a]];
    
                this.settings[key] = args[Object.keys(args)[a]];
            }
    
            if (!this.settings.format && typeof args.meridiem == "undefined") {
                this.settings.meridiem = false;
            }
    
            this.settings.meridiem = this.settings.format ? true : this.settings.meridiem;
            this.settings.minTime = !(
                this.settings.minTime.getDate !== undefined ||
                this.settings.minTime.getDate !== null
            )
                ? new Date(new Date().toDateString() + " " + this.settings.minTime)
                : new Date(new Date().toDateString() + " 00:00");
            this.settings.maxTime = !(
                this.settings.maxTime.getDate !== undefined ||
                this.settings.maxTime.getDate !== null
            )
                ? new Date(new Date().toDateString() + " " + this.settings.maxTime)
                : this.settings.maxTime;
    
            if (this.settings.maxTime.toString() == this.settings.minTime.toString()) {
                var maxTime = new Date(this.settings.minTime);
    
                maxTime.setHours(maxTime.getHours() + 24);
    
                this.settings.maxTime = maxTime;
            }
    
            if (this.element.value) {
                var newTime = new Date(new Date().toDateString() + " " + this.element.value);
    
                this.time = !isNaN(newTime.getTime()) ? newTime : this.time;
            }
    
            this.time.setMilliseconds(0);
    
            if (Object.keys(this.elements).length) {
                this.updateTime("minute", true, 0);
    
                this.render();
            }
    
            if (!this.validateTime()) {
                this.time = this.settings.minTime
                    ? this.settings.minTime
                    : this.settings.maxTime;
            }
        };
    
        this.buildTimepicker = function () {
            var wrapper = document.createElement("div");
            var elements = ["hour", "minute", "meridiem"];
    
            wrapper.className = "timepicker__wrapper";
            wrapper.setAttribute("id", "tp_" + (Math.floor(Math.random() * 100) + 1));
    
            if (!Object.keys(this.elements).length) {
                for (e = 0; e < elements.length; e++) {
                    this.elements[elements[e]] = document.createElement("div");
                    this.elements[elements[e]].className = "timepicker__" + elements[e];
    
                    var up = document.createElement("div");
                    up.appendChild(document.createElement("div"));
                    var display = document.createElement("p");
                    var down = document.createElement("div");
                    down.appendChild(document.createElement("div"));
    
                    up.className = "timepicker__button timepicker__button__up";
                    display.className = "display";
                    down.className = "timepicker__button timepicker__button__down";
    
                    if (this.settings.arrowColor) {
                        up.childNodes[0].style["border-bottom-color"] = this.settings.arrowColor;
                        down.childNodes[0].style["border-top-color"] = this.settings.arrowColor;
                    }
    
                    this.elements[elements[e]].appendChild(up);
                    this.elements[elements[e]].appendChild(display);
                    this.elements[elements[e]].appendChild(down);
                }
            }
    
            this.timepicker = wrapper;
    
            this.element.parentNode.insertBefore(wrapper, this.element.nextSibling);
    
            this.addListeners();
    
            this.render();
        };
    
        this.render = function () {
            var wrapper = this.cleanWrapper(this.timepicker);
    
            if (this.settings.meridiem) {
                wrapper.className =
                    wrapper.className.indexOf(" timepicker__wrapper-full") >= 0
                        ? wrapper.className
                        : wrapper.className + " timepicker__wrapper-full";
            }
    
            for (e = 0; e < Object.keys(this.elements).length; e++) {
                var key = Object.keys(this.elements)[e];
                var element = this.elements[key];
                var func = "get" + key.charAt(0).toUpperCase() + key.slice(1);
    
                element.querySelector(".display").innerText = this[func]();
    
                if (Object.keys(this.elements)[e] == "meridiem" && !this.settings.meridiem) {
                    continue;
                }
    
                wrapper.appendChild(element);
            }
    
            this.timepicker = wrapper;
    
            this.updateInput();
        };
    
        this.cleanWrapper = function (wrapper) {
            while (wrapper.hasChildNodes()) {
                wrapper.removeChild(wrapper.lastChild);
            }
    
            return wrapper;
        };
    
        this.handleClick = function (e) {
            var element = e.currentTarget;
    
            var parent = element.parentNode.className.replace("timepicker__", "");
            var add = element.className.indexOf("up") !== -1 ? true : false;
    
            this.updateTime(parent, add);
        };
    
        this.validateInput = function (e) {
            var value = e.currentTarget.value;
            var date = value.length
                ? new Date(new Date().toDateString() + " " + value)
                : false;
    
            if (date && !isNaN(date.getTime())) {
                this.time = date;
            }
    
            if (!this.validateTime()) {
                var after = date.getTime() > this.settings.maxTime.getTime();
                date = after
                    ? new Date(this.settings.maxTime)
                    : new Date(this.settings.minTime);
                after
                    ? date.setMinutes(date.getMinutes() - 1)
                    : date.setMinutes(date.getMinutes() + 1);
    
                this.time = date;
            }
    
            this.render();
        };
    
        this.updateTime = function (method, add, amount) {
            var amount = amount || 1;
    
            switch (method) {
                case "meridiem":
                    this.time.getHours() > 12
                        ? this.time.setHours(this.time.getHours() - 12)
                        : this.time.setHours(this.time.getHours() + 12);
    
                    break;
    
                default:
                    if (add) {
                        this.add(method, amount);
                    } else {
                        this.subtract(method, amount);
                    }
            }
    
            if (!this.validateTime()) {
                var date = add
                    ? new Date(this.settings.minTime)
                    : new Date(this.settings.maxTime);
                add
                    ? date.setMinutes(date.getMinutes() + 1)
                    : date.setMinutes(date.getMinutes() - 1);
    
                this.time = date;
            }
    
            this.render();
        };
    
        this.add = function (method, amount) {
            var amount = amount || 1;
    
            switch (method) {
                case "minute":
                    this.time.setMinutes(this.time.getMinutes() + amount);
    
                    break;
    
                case "hour":
                    this.time.setHours(this.time.getHours() + amount);
    
                    break;
            }
        };
    
        this.subtract = function (method, amount) {
            var amount = amount || 1;
    
            switch (method) {
                case "minute":
                    this.time.setMinutes(this.time.getMinutes() - amount);
    
                    break;
    
                case "hour":
                    this.time.setHours(this.time.getHours() - amount);
    
                    break;
            }
        };
    
        this.validateTime = function () {
            if (this.settings.minTime) {
                this.settings.maxTime = this.settings.maxTime;
    
                this.time.setDate(new Date().getDate());
    
                return (
                    this.time.getTime() < this.settings.maxTime.getTime() &&
                    this.time.getTime() > this.settings.minTime.getTime()
                );
            }
    
            return true;
        };
    
        this.updateInput = function (parent) {
            if (this.initialized) {
                this.element.value = this.buildString();
            }
        };
    
        this.buildString = function () {
            return (
                this.getHour() +
                ":" +
                this.getMinute() +
                " " +
                this.getMeridiem()
            ).trim();
        };
    
        this.toggleActive = function (e) {
            if (e.target == this.element) {
                if (!this.initialized) {
                    this.initialized = true;
    
                    this.updateInput();
                }
    
                this.updateBounds(this.timepicker, e.target);
    
                this.active = true;
            } else if (
                e.target.className.indexOf("timepicker__") == -1 &&
                e.target.parentElement.className.indexOf("timepicker__") == -1
            ) {
                this.active = false;
            }
    
            this.timepicker.className = this.active
                ? this.timepicker.className.indexOf(" timepicker__wrapper-active") >= 0
                    ? this.timepicker.className
                    : this.timepicker.className + " timepicker__wrapper-active"
                : this.timepicker.className.replace(" timepicker__wrapper-active", "");
        };
    
        this.updateBounds = function () {
            var bounds = this.element.getBoundingClientRect();
            this.timepicker.style.top = this.element.offsetTop + this.element.offsetHeight + "px";
            this.timepicker.style.width = bounds.width + "px";
            var leftCalc        = (bounds.width * 15) / 100;
            var maxWidthCalc    = (bounds.width - leftCalc);
            this.timepicker.style.maxWidth = maxWidthCalc + "px";
            this.timepicker.style.left = leftCalc + "px";
        };
    
        this.addListeners = function () {
            var elements = Object.keys(this.elements);
    
            for (e = 0; e < elements.length; e++) {
                var element = this.elements[elements[e]];
                var buttons = [].slice.call(element.childNodes).filter(function (node) {
                    return node.className.indexOf("button") !== -1;
                });
    
                for (c = 0; c < buttons.length; c++) {
                    var button = buttons[c];
    
                    button.addEventListener("click", this.handleClick.bind(this));
                }
            }
    
            this.element.addEventListener("change", this.validateInput.bind(this));
            document.body.addEventListener("click", this.toggleActive.bind(this));
            window.addEventListener("resize", this.updateBounds.bind(this));
        };
    
        this.getTime = function () {
            return this.time;
        };
    
        this.getHour = function () {
            if (!this.settings.format) {
                return this.time.getHours() < 10
                    ? "0" + this.time.getHours()
                    : this.time.getHours();
            } else {
                return this.time.getHours() > 12
                    ? this.time.getHours() % 12
                    : this.time.getHours() == 0
                    ? 12
                    : this.time.getHours();
            }
        };
    
        this.getMinute = function () {
            var minutes = this.time.getMinutes();
    
            return minutes < 10 ? "0" + minutes : minutes;
        };
    
        this.getMeridiem = function () {
            if (!this.settings.meridiem) {
                return "";
            } else {
                return this.time.getHours() >= 12 ? "pm" : "am";
            }
        };
    
        this.init = function () {
            if (element.length) {
                console.warn(
                    "Timepicker selector must be for a specific element, not a list of elements."
                );
    
                return;
            }
    
            this.element = element;
    
            this.updateSettings(args);
            this.buildTimepicker();
        };
        this.init();
    }
    // tpicker.updateSettings({ minTime: "2:00 am" });
</script>
<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);

                        let start = parse12HourTime(startTime_{{ $day }});
                        let end = parse12HourTime(endTime_{{ $day }});

                        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>',
                });
            }
        });

        function parse12HourTime(timeStr) {
            let [time, modifier] = timeStr.split(' ');
            let [hours, minutes] = time.split(':').map(Number);

            if (modifier.toUpperCase() === 'PM' && hours < 12) {
                hours += 12;
            }
            if (modifier.toUpperCase() === 'AM' && hours === 12) {
                hours = 0;
            }

            let date = new Date();
            date.setHours(hours, minutes, 0, 0);
            return date;
        }
    });
</script>
@endsection