@extends('layouts.layout')

@push('header')
    {{-- <style>
        code {
            padding: 5px 8px;
            border-radius: 10px;
            background-color: #f8f9f9;
            color: #CC0066;
        }

        [type='color'] {
            -moz-appearance: none;
            -webkit-appearance: none;
            appearance: none;
            padding: 0;
            width: 15px;
            height: 15px;
            border: none;
        }

        [type='color']::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        [type='color']::-webkit-color-swatch {
            border: none;
        }

        .color-picker-custom {
            padding: 10px 15px;
            border-radius: 10px;
            border: 1px solid #ccc;
            background-color: #f8f9f9;
        }
    </style> --}}
    {{-- <link rel="stylesheet" href="{{ asset('assets/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css') }}"> --}}
@endpush

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h3>@lang('Scheduler Settings')</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}">@lang('Dashboard')</a>
                        </li>
                        <li class="breadcrumb-item active">@lang('Scheduler Settings')</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <div class="card">
        <div class="card-header">
            <h5><span class="badge badge-info">@lang('Scheduler Time Range')</span></h5>
            <div class="row">
                <div class="btn-group" role="group">
                    <button class="btn btn-default" data-toggle="collapse" href="#range"><i class="far fa-clock"></i> @lang('Time Range')</button>
                </div>
            </div>
        </div>
        <div class="card-body custom-padding-top-0">
            <section id="range" class="collapse project-tab">
                <div class="row">
                    <div class="col-md-12">
                        <form id="scheduler-settings-form" class="form-material form-horizontal" autocomplete="off" action="#" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>@lang('Start Time') <b hidden class="ambitious-crimson">*</b></label>
                                        <input type="text" name="start_time" id="start_time" class="time-flatpickr form-control @error('start_time') is-invalid @enderror" placeholder="@lang('Start Time')" value="{{ old('start_time') }}" required>
                                        @error('start_time')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>@lang('End Time') <b hidden class="ambitious-crimson">*</b></label>
                                        <input type="text" name="end_time" id="end_time" class="time-flatpickr form-control @error('end_time') is-invalid @enderror" placeholder="@lang('End Time')" value="{{ old('end_time') }}" required>
                                        @error('end_time')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-md-3 col-form-label"></label>
                                        <div class="col-md-8">
                                            <input type="submit" value="{{ __('Update') }}" class="btn btn-outline btn-info btn-lg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5><span class="badge badge-info">@lang('Scheduler Color Code')</span></h5>
            <div class="row">
                <div class="btn-group" role="group">
                    <button class="btn btn-default" data-toggle="collapse" href="#color"><i class="fas fa-palette"></i> @lang('Color Code')</button>
                </div>
            </div>
        </div>
        <div class="card-body custom-padding-top-0">
            <section id="color" class="collapse project-tab">
                <div class="row">
                    <div class="col-md-12">
                        <form id="scheduler-color-settings-form" class="form-material form-horizontal" autocomplete="off" action="{{ route('scheduler-color-settings.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>@lang('Appointment Status') <b hidden class="ambitious-crimson">*</b></label>
                                        </div>
                                    </div>
                                    <div id="appointment_status_div" class="col-md-12">
                                        @foreach ($appointment_status_colors as $appointment_status_color)
                                            <div class="row col-md-12 mb-2">
                                                <div class="row col-md-12">
                                                    <input type="text" class="form-control col-md-6" value="{{ $appointment_status_color->name }}" readonly>
                                                    <div class="input-group col-md-6">
                                                        <input type="color" data-id="{{ $appointment_status_color->id }}" id="{{ str_replace(' ', '_', strtolower($appointment_status_color->name . '_color')) }}" name="{{ str_replace(' ', '_', strtolower($appointment_status_color->name . '_color')) }}" class="form-control"
                                                            value="{{ $appointment_status_color->color_code }}" style="width: 50px;">
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>@lang('Appointment Types') <b hidden class="ambitious-crimson">*</b></label>
                                        </div>
                                    </div>
                                    <div id="appointment_types_div" class="col-md-12">
                                        @foreach ($appointment_type_colors as $appointment_type_color)
                                            <div class="row col-md-12 mb-2">
                                                <div class="row col-md-12">
                                                    <input type="text" class="form-control col-md-6" value="{{ $appointment_type_color->name }}" readonly>
                                                    <div class="input-group col-md-6">
                                                        <input type="color" data-id="{{ $appointment_type_color->id }}" id="{{ str_replace(' ', '_', strtolower($appointment_type_color->name . '_color')) }}" name="{{ str_replace(' ', '_', strtolower($appointment_type_color->name . '_color')) }}" class="color-custom form-control"
                                                            value="{{ $appointment_type_color->color_code }}" style="width: 50px;">
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    {{-- <span class="color-picker-custom">
                                    <label for="colorPicker">
                                        <input type="color" class="color-custom" value="#1DB8CE" id="colorPicker">
                                    </label>
                                </span> --}}
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-md-3 col-form-label"></label>
                                        <div class="col-md-8">
                                            <input type="submit" value="{{ __('Update') }}" class="btn btn-outline btn-info btn-lg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5><span class="badge badge-info">@lang('Scheduler Layout')</span></h5>
            <div class="row">
                <div class="btn-group" role="group">
                    <button class="btn btn-default" data-toggle="collapse" href="#type"><i class="fas fa-tv"></i> @lang('Layout')</button>
                </div>
            </div>
        </div>
        <div class="card-body custom-padding-top-0">
            <section id="type" class="collapse project-tab">
                <div class="row">
                    <div class="col-md-12">
                        <form id="scheduler-layout-settings-form" class="form-material form-horizontal" autocomplete="off" action="#" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>@lang('Scheduler Layout') <b hidden class="ambitious-crimson">*</b></label>
                                        <select name="scheduler_type" id="scheduler_type" class="form-control" placeholder="@lang('Select Layout')" required>
                                            @foreach ($scheduler_layout_types as $scheduler_layout_type)
                                                <option value="{{ $scheduler_layout_type }}"{{ $current_settings->scheduler_type == $scheduler_layout_type ? 'selected' : '' }}>{{ $scheduler_layout_type }}</option>
                                            @endforeach
                                        </select>
                                        @error('scheduler_type')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-md-3 col-form-label"></label>
                                        <div class="col-md-8">
                                            <input type="submit" value="{{ __('Update') }}" class="btn btn-outline btn-info btn-lg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection

@push('footer')
    {{-- <script src="{{ asset('assets/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js') }}"></script> --}}


    <script>
        $('.time-flatpickr').flatpickr({
            noCalendar: true,
            enableTime: true,
            dateFormat: 'h:i K'
        });

        fetchSettings()
        fetchColorSettings()

        function fetchSettings() {
            var _url = '{{ route('scheduler-settings.fetch', 1) }}';
            $.ajax({
                type: "GET",
                url: _url,
                dataType: "json",
                success: function(settings) {
                    $("#start_time").flatpickr({
                        altInput: true,
                        disabled: true,
                        noCalendar: true,
                        enableTime: true,
                        dateFormat: 'h:i K'
                    }).setDate(settings.settings.start_time, true, 'h:i K');
                    $("#end_time").flatpickr({
                        altInput: true,
                        disabled: true,
                        noCalendar: true,
                        enableTime: true,
                        dateFormat: 'h:i K'
                    }).setDate(settings.settings.end_time, true, 'h:i K');
                    //$('#start_time').val(moment(settings.settings.start_time, "HH:mm:ss").format("hh:mm A"));                    
                    //$('#end_time').val(moment(settings.settings.end_time, "HH:mm:ss").format("hh:mm A"));                    
                }
            });
        }

        function fetchColorSettings() {
            var _url = '{{ route('scheduler-color-settings.fetch') }}';
            status_str = "";
            types_str = "";
            $.ajax({
                type: "GET",
                url: _url,
                dataType: "json",
                success: function(colors) {
                    //$('#appointment_status_div').html("");
                    $.each(colors.appointment_status_colors, function(status_key, status_item) {
                        status_str += '<div class="row col-md-12 mb-2">';
                        status_str += '<div class="row col-md-12">';
                        status_str += '<input type="text" id="' + status_item.name.toLowerCase().replace(/\s/g, '_') + '" name="' + status_item.name.toLowerCase().replace(/\s/g, '_') + '" class="form-control col-md-6" value="' + status_item.name + '" readonly>';
                        status_str += '<div class="input-group col-md-6">';
                        status_str += '<input type="text" id="' + status_item.name.toLowerCase().replace(/\s/g, '_') + '_color_value" name="' + status_item.name.toLowerCase().replace(/\s/g, '_') + '_color_value" class="form-control" value="' + status_item.color_code + '" readonly>';
                        status_str += '<div class="input-group-append">';
                        status_str += '<input type="color" id="' + status_item.name.toLowerCase().replace(/\s/g, '_') + '_color" name="' + status_item.name.toLowerCase().replace(/\s/g, '_') + '_color" class="color-custom form-control" value="' + status_item.color_code + '" style="width: 50px;">';
                        status_str += '</div>';
                        status_str += '</div>';
                        status_str += '</div>';
                        status_str += '</div>';
                    });
                    //$('#appointment_status_div').append(status_str);

                    //$('#appointment_types_div').html("");
                    $.each(colors.appointment_type_colors, function(type_key, type_item) {
                        types_str += '<div class="row col-md-12 mb-2">';
                        types_str += '<div class="row col-md-12">';
                        types_str += '<input type="text" id="' + type_item.name.toLowerCase().replace(/\s/g, '_') + '" name="' + type_item.name.toLowerCase().replace(/\s/g, '_') + '" class="form-control col-md-6" value="' + type_item.name + '" readonly>';
                        types_str += '<div class="input-group col-md-6">';
                        types_str += '<input type="text" id="' + type_item.name.toLowerCase().replace(/\s/g, '_') + '_color_value" name="' + type_item.name.toLowerCase().replace(/\s/g, '_') + '_color_value" class="form-control" value="' + type_item.color_code + '" readonly>';
                        types_str += '<div class="input-group-append">';
                        types_str += '<input type="color" id="' + type_item.name.toLowerCase().replace(/\s/g, '_') + '_color" name="' + type_item.name.toLowerCase().replace(/\s/g, '_') + '_color" class="color-custom form-control" value="' + type_item.color_code + '" style="width: 50px;">';
                        types_str += '</div>';
                        types_str += '</div>';
                        types_str += '</div>';
                        types_str += '</div>';
                    });
                    //$('#appointment_types_div').append(types_str);
                }
            });
        }

        $("#scheduler-settings-form").submit(function(e) {
            e.preventDefault();
            const fd = new FormData(this);
            var _url = '{{ route('scheduler-settings.update') }}';
            $.ajax({
                url: _url,
                method: 'post',
                data: fd,
                cache: false,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(response) {
                    if (response.status == 200) {
                        Swal.fire(
                            'Updated!',
                            'Data Updated Successfully!',
                            'success'
                        )
                    }
                }
            });
        });

        $("#scheduler-layout-settings-form").submit(function(e) {
            e.preventDefault();
            const fd = new FormData(this);
            var _url = '{{ route('scheduler-layout-settings.update') }}';
            $.ajax({
                url: _url,
                method: 'post',
                data: fd,
                cache: false,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(layout_response) {
                    if (layout_response.status == 200) {
                        Swal.fire(
                            'Updated!',
                            'Data Updated Successfully!',
                            'success'
                        )
                    }
                }
            });
        });

        /* $("#colorPicker2").css('background', $(this).val());*/

        $("#open_color").change(function() {
            $("h5").css('background', $(this).val());
            //console.log(document.getElementById("open_color").value);
        });




        /* document.getElementById('input[type=color]').forEach(function(picker) {

            var targetLabel = document.querySelector('label[for="' + picker.id + '"]'),
                codeArea = document.createElement('span');

            codeArea.innerHTML = picker.value;
            targetLabel.appendChild(codeArea);

            picker.addEventListener('change', function() {
                codeArea.innerHTML = picker.value;
                targetLabel.appendChild(codeArea);
                console.log(picker.value);
                $('#colorPicker').val(picker.value);
            });
        }); */
    </script>
@endpush