@extends('layouts.app')

@section('content')
<div class="page-wrapper">

    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">{{ trans('lang.stylists') }}</h3>
        </div>

        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">{{ trans('lang.dashboard') }}</a></li>
                <li class="breadcrumb-item"><a href="{!! route('stylists') !!}">{{ trans('lang.stylists') }}</a>
                </li>
                <li class="breadcrumb-item active">{{ trans('lang.stylist_create') }}</li>
            </ol>
        </div>
    </div>

    <div class="container-fluid">
        <div class="cat-edite-page max-width-box">
            <form action="{{ route('stylists.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="card  pb-4">

                    <div class="card-header">
                        <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
                            <li role="presentation" class="nav-item">
                                <a href="#category_information" aria-controls="description" role="tab"
                                    data-toggle="tab"
                                    class="nav-link active">{{ trans('lang.stylists_information') }}</a>
                            </li>
                            {{-- <li role="presentation" class="nav-item">
                                    <a href="#review_attributes" aria-controls="review_attributes" role="tab"
                                        data-toggle="tab" class="nav-link">{{ trans('lang.reviewattribute_plural') }}</a>
                            </li> --}}
                        </ul>
                    </div>

                    <div class="card-body">

                        <div id="data-table_processing" class="dataTables_processing panel panel-default"
                            style="display: none;">
                            {{ trans('lang.processing') }}
                        </div>
                        <div class="error_top" style="display:none"></div>
                        @include('alerts.error_messages')
                        <div class="row restaurant_payout_create" role="tabpanel">

                            <div class="restaurant_payout_create-inner tab-content">
                                <div role="tabpanel" class="tab-pane active" id="stylists_information">
                                    <fieldset>
                                        <legend>{{ trans('lang.stylists_create') }}</legend>
                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">{{ trans('lang.stylists_name') }}</label>
                                            <div class="col-7">
                                                <input type="text" class="form-control cat-name" name="name">
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.stylists_name_help') }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row width-100">
                                            <label
                                                class="col-3 control-label">{{ trans('lang.stylists_email') }}</label>
                                            <div class="col-7">
                                                <input type="email" class="form-control cat-name" name="email">
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.stylists_email_help') }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row width-100">
                                            <label
                                                class="col-3 control-label">{{ trans('lang.stylists_position') }}</label>
                                            <div class="col-7">
                                                <input type="text" class="form-control cat-name" name="position">
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.stylists_position_help') }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row width-100">
                                            <label
                                                class="col-3 control-label ">{{ trans('lang.store') }}</label>
                                            <div class="col-7">
                                                <select name="store_id" id="store" class="form-control">
                                                    <option value="">{{ trans('lang.select_store') }}</option>
                                                    @foreach ($bookit_stores as $bookit_store)
                                                    <option value="{{ $bookit_store->id }}"
                                                        {{ old('store_id', $stylist->store_id ?? '') == $bookit_store->id ? 'selected' : '' }}>
                                                        {{ $bookit_store->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                {{-- <div class="form-text text-muted">
                                                        {{ trans('lang.parent_category_help') }}
                                            </div> --}}
                                        </div>
                                </div>
                                <fieldset>
                                    <legend>{{ trans('lang.time_slots') }}</legend>

                                    <div class="form-group row">
                                        <div class="form-group row width-100">
                                            <div class="col-7">
                                                <button type="button" class="btn btn-primary add_working_hours_restaurant_btn">
                                                    <i></i>{{ trans('lang.add_time_slots') }}
                                                </button>
                                            </div>
                                        </div>

                                        <div class="working_hours_div" style="display:none">
                                            <div class="form-group row">
                                                <div class="form-group row width-50">
                                                    <div class="form-check width-100">
                                                        <input name="copy_monday_to_all_days" type="checkbox"
                                                            onchange="copyMondayToAll()" id="copy_monday_to_all">
                                                        <label class="col-3 control-label"
                                                            for="copy_monday_to_all">{{ trans('lang.copy_sunday_to_all_days') }}</label>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Loop through all days --}}
                                            @php
                                            $days = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
                                            @endphp

                                            @foreach($days as $day)
                                            <div class="form-group row mb-0">
                                                <label class="col-1 control-label">{{ trans('lang.'. strtolower($day)) }}</label>
                                                <div class="col-12">
                                                    <button type="button" class="btn btn-primary"
                                                        onclick="addMorehour('{{ $day }}','{{ $day }}', '1')">
                                                        {{ trans('lang.add_more') }}
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="restaurant_working_hour_{{ $day }}_div restaurant_discount mb-5 form-group row mt-2"
                                                style="display:none">
                                                <div class="col-12">
                                                    <table class="booking-table" id="working_hour_table_{{ $day }}">
                                                        <tr>
                                                            <th><label class="col-3 control-label">{{ trans('lang.from') }}</label></th>
                                                            <th><label class="col-3 control-label">{{ trans('lang.to') }}</label></th>
                                                            <th><label class="col-3 control-label">{{ trans('lang.actions') }}</label></th>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </fieldset>
                                <div class="form-group row width-100">
                                    <div class="form-check row width-100">
                                        <input type="checkbox" class="is_active" id="is_active" name="is_active"
                                            value="1">
                                        <label class="col-3 control-label"
                                            for="is_active">{{ trans('lang.is_active') }}</label>
                                    </div>
                                </div>

                                <div class="form-group row width-100">
                                    <label
                                        class="col-3 control-label">{{ trans('lang.category_image') }}</label>
                                    <div class="col-7">
                                        <input type="file" id="category_image" name="image">
                                        <div class="placeholder_img_thumb cat_image"></div>
                                        <div id="uploding_image"></div>
                                        <div class="form-text text-muted w-50">
                                            {{ trans('lang.category_image_help') }}
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row width-100">
                                    <label
                                        class="col-3 control-label">{{ trans('lang.portfolio_image') }}</label>
                                    <div class="col-7">
                                        <input type="file" id="category_image" name="portfolio_image[]" multiple>
                                        <div class="placeholder_img_thumb cat_image"></div>
                                        <div id="portfolio_image"></div>
                                        <div class="form-text text-muted w-50">
                                            {{ trans('lang.portfolio_image_help') }}
                                        </div>
                                    </div>
                                </div>

                                </fieldset>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="review_attributes">

                            </div>
                        </div>

                    </div>

                </div>

                <div class="form-group col-12 text-center btm-btn">
                    <button type="submit" class="btn btn-primary save_category_btn"><i class="fa fa-save"></i>
                        {{ trans('lang.save') }}
                    </button>
                    <a href="{!! route('stylists') !!}" class="btn btn-default"><i
                            class="fa fa-undo"></i>{{ trans('lang.cancel') }}</a>
                </div>

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

</div>
@endsection

@section('scripts')
<script>
    var database = firebase.firestore();
    var ref = database.collection('vendor_categories');
    var photo = "";
    var id_category = "69396e386c02f";
    var category_length = 1;
    var placeholderImage = '';
    var placeholder = database.collection('settings').doc('placeHolderImage');
    var ref_review_attributes = database.collection('review_attributes');

    placeholder.get().then(async function(snapshotsimage) {
        var placeholderImageData = snapshotsimage.data();
        placeholderImage = placeholderImageData.image;
    })

    $(document).ready(function() {

        jQuery("#data-table_processing").show();

        ref.get().then(async function(snapshots) {
            category_length = snapshots.size + 1;
            jQuery("#data-table_processing").hide();
        })


        // $(".save_category_btn").click(async function () {

        //     var title = $(".cat-name").val();
        //     var description = $(".category_description").val();
        //     var item_publish = $("#item_publish").is(":checked");
        //     var show_in_homepage = $("#show_in_homepage").is(":checked");

        //     var review_attributes = [];
        //     $('#review_attributes input').each(function () {
        //         if ($(this).is(':checked')) {
        //             review_attributes.push($(this).val());
        //         }
        //     });

        //     if (title == '') {

        //         $(".error_top").show();
        //         $(".error_top").html("");
        //         $(".error_top").append("<p>{{ trans('lang.enter_cat_title_error') }}</p>");
        //         window.scrollTo(0, 0);
        //     } else {
        //         var count_vendor_categories = 0;
        //             if (show_in_homepage) {

        //                 await database.collection('vendor_categories').where('show_in_homepage', "==", true).get().then(async function (snapshots) {

        //             count_vendor_categories = snapshots.docs.length;

        //             });
        //             }
        //             if (count_vendor_categories >= 5) {
        //         alert("Already 5 categories are active for show in homepage..");
        //         return false;
        //     } else {
        //         database.collection('vendor_categories').doc(id_category).set({
        //             'id': id_category,
        //             'title': title,
        //             'description': description,
        //             'photo': photo,
        //             'review_attributes': review_attributes,
        //             'publish': item_publish,
        //             'show_in_homepage': show_in_homepage,
        //         }).then(function (result) {
        //             window.location.href = '{{ route('categories') }}';
        //         });
        //      }
        //     }

        // });

    });


    ref_review_attributes.get().then(async function(snapshots) {
        var ra_html = '';
        snapshots.docs.forEach((listval) => {
            var data = listval.data();
            ra_html += '<div class="form-check width-100">';
            ra_html += '<input type="checkbox" id="review_attribute_' + data.id + '" value="' + data
                .id + '">';
            ra_html += '<label class="col-3 control-label" for="review_attribute_' + data.id +
                '">' + data.title + '</label>';
            ra_html += '</div>';
        });
        $('#review_attributes').html(ra_html);
    });


    var storageRef = firebase.storage().ref('images');

    // function handleFileSelect(evt) {

    //     var f = evt.target.files[0];
    //     var reader = new FileReader();
    //     reader.onload = (function (theFile) {

    //         return function (e) {

    //             var filePayload = e.target.result;
    //             var val = $('#category_image').val().toLowerCase();
    //             var ext = val.split('.')[1];
    //             var docName = val.split('fakepath')[1];
    //             var filename = $('#category_image').val().replace(/C:\\fakepath\\/i, '')
    //             var timestamp = Number(new Date());
    //             var filename = filename.split('.')[0] + "_" + timestamp + '.' + ext;
    //             var uploadTask = storageRef.child(filename).put(theFile);
    //             uploadTask.on('state_changed', function (snapshot) {
    //                 var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    //             }, function (error) {
    //             }, function () {
    //                 uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
    //                     jQuery("#uploding_image").text("Upload is completed");
    //                     photo = downloadURL;
    //                     $(".cat_image").empty();
    //                     $(".cat_image").append('<img class="rounded" style="width:50px" src="' + photo + '" alt="image">');

    //                 });
    //             });

    //         };
    //     })(f);
    //     reader.readAsDataURL(f);
    // }

    //upload image with compression
    // $("#category_image").resizeImg({

    //     callback: function(base64str) {

    //         var val = $('#category_image').val().toLowerCase();
    //         var ext = val.split('.')[1];
    //         var docName = val.split('fakepath')[1];
    //         var filename = $('#category_image').val().replace(/C:\\fakepath\\/i, '')
    //         var timestamp = Number(new Date());
    //         var filename = filename.split('.')[0] + "_" + timestamp + '.' + ext;

    //         //upload base64str encoded string as a image to firebase
    //         var uploadTask = storageRef.child(filename).putString(base64str.split(',')[1], "base64", {contentType: 'image/'+ext})

    //         uploadTask.on('state_changed', function (snapshot) {
    //             var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    //         }, function (error) {
    //         }, function () {
    //             uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
    //                 jQuery("#uploding_image").text("Upload is completed");
    //                 photo = downloadURL;
    //                 $(".cat_image").empty();
    //                 $(".cat_image").append('<img class="rounded" style="width:50px" src="' + photo + '" alt="image">');
    //                 $("#category_image").val('');
    //             });
    //         });
    //     }
    // });
</script>
<script>
    const phoneInputInstances = [];

    function initPhoneInputs() {
        $('.phone-input').each(function() {
            const input = this;

            // Avoid re-initializing already initialized inputs
            if (!input.classList.contains('iti-initialized')) {
                const iti = window.intlTelInput(input, {
                    initialCountry: 'lb',
                    separateDialCode: true,
                    nationalMode: true,
                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
                });

                phoneInputInstances.push({
                    input,
                    iti
                });

                // Set initial phone_code
                const code = iti.getSelectedCountryData().dialCode;
                $(input).siblings('.phone-code').val('+' + code);

                input.addEventListener('countrychange', function() {
                    const updatedCode = iti.getSelectedCountryData().dialCode;
                    $(input).siblings('.phone-code').val('+' + updatedCode);
                });
            }
        });
    }

    $(document).ready(function() {
        initPhoneInputs();

        $('.add-driver').on('click', function() {
            const index = $('#drivers-table tbody tr').length;

            const newRow = `
                <tr>
                    <td><input type="text" name="drivers[${index}][first_name]" class="form-control" placeholder="First Name"></td>
                    <td><input type="text" name="drivers[${index}][last_name]" class="form-control" placeholder="Last Name"></td>
                    <td>
                        <input type="tel" name="drivers[${index}][phone]" class="form-control phone-input" placeholder="Mobile Number">
                        <input type="hidden" name="drivers[${index}][phone_code]" class="phone-code">
                    </td>
                    <td><button type="button" class="btn btn-danger remove-driver">-</button></td>
                </tr>`;
            $('#drivers-table tbody').append(newRow);

            initPhoneInputs(); // Reinitialize new phone input
        });

        $(document).on('click', '.remove-driver', function() {
            $(this).closest('tr').remove();
        });

        // Ensure phone_code is set before submitting the form
        $('#store-form').on('submit', function(event) {
            // event.preventDefault();
            phoneInputInstances.forEach(({
                input,
                iti
            }) => {
                const code = iti.getSelectedCountryData().dialCode;

                // Correctly find the corresponding hidden phone_code input
                const $phoneCodeInput = $(input).closest('td').find('.phone-code');

                $phoneCodeInput.val('+' + code);
                console.log('Phone code updated to: +' + code);
                console.log('phone code :', $phoneCodeInput.val());
            });
        });
    });
</script>
<script>
    var countAddButton = 1;

    function addMoreButton(day, day2, count) {
        count = countAddButton;
        $(".restaurant_discount_options_" + day + "_div").show();
        // 	$(".restaurant_opentime_options_"+day).append('<input type="time" class="form-control" id="openTime'+day+'">');
        // $(".restaurant_closetime_options_"+day).append('<input type="time" class="form-control" id="closeTime'+day+'"  >');
        // $(".restaurant_discount_options_"+day).append('<input type="number" class="form-control" id="discount'+day+'">');
        // $(".restaurant_action_options_"+day+"_div").append('<button type="button" class="btn btn-primary save_option_day_button'+day+'" onclick="addMoreFunctionButton(`'+day2+'`,`'+day+'`)" >Save</button>');

        $('#special_offer_table_' + day + ' tr:last').after('<tr>' +
            '<td class="" style="width:10%;"><input type="time" class="form-control" id="openTime' + day + count +
            '"></td>' +
            '<td class="" style="width:10%;"><input type="time" class="form-control" id="closeTime' + day + count +
            '"></td>' +
            '<td class="" style="width:30%;">' +
            '<input type="number" class="form-control" id="discount' + day + count + '" style="width:60%;">' +
            '<select id="discount_type' + day + count +
            '" class="form-control" style="width:40%;"><option value="percentage"/>%</option><option value="amount"/>' +
            currentCurrency + '</option></select>' +
            '</td>' +
            '<td style="width:30%;"><select id="type' + day + count +
            '" class="form-control"><option value="delivery"/>Delivery Discount</option></select></td>' +
            '<td class="action-btn" style="width:20%;">' +
            '<button type="button" class="btn btn-primary save_option_day_button' + day + count +
            '" onclick="addMoreFunctionButton(`' + day2 + '`,`' + day + '`,' + countAddButton +
            ')" style="width:62%;"><i class="fa fa-save"></i> Save</button>' +
            '</td></tr>');
        countAddButton++;

    }

    function addMoreFunctionButton(day1, day2, count) {
        var discount = $("#discount" + day2 + count).val();
        var discount_type = $('#discount_type' + day2 + count).val();
        var type = $('#type' + day2 + count).val();
        var closeTime = $("#closeTime" + day2 + count).val();
        var openTime = $("#openTime" + day2 + count).val();
        if (discount == "" || closeTime == '' || openTime == '') {
            $(".error_top").show();
            $(".error_top").html("");
            $(".error_top").append("<p>Please Enter valid time or discount</p>");
            window.scrollTo(0, 0);
        } else if (discount > 100 || discount == 0) {
            $(".error_top").show();
            $(".error_top").html("");
            $(".error_top").append("<p>Please Enter valid discount</p>");
            window.scrollTo(0, 0);
        } else {

            var timeslotVar = {
                'discount': discount,
                'from': openTime,
                'to': closeTime,
                'type': discount_type,
                'discount_type': type
            };

            if (day1 == 'sunday') {
                timeslotSunday.push(timeslotVar);
            } else if (day1 == 'monday') {
                timeslotMonday.push(timeslotVar);
            } else if (day1 == 'tuesday') {
                timeslotTuesday.push(timeslotVar);
            } else if (day1 == 'wednesday') {
                timeslotWednesday.push(timeslotVar);
            } else if (day1 == 'thursday') {
                timeslotThursday.push(timeslotVar);
            } else if (day1 == 'friday') {
                timeslotFriday.push(timeslotVar);
            } else if (day1 == 'Saturday') {
                timeslotSaturday.push(timeslotVar);
            }

            /*$("#discount"+day2+"").remove();
            $("#discount_type"+day2+"").remove();
                $("#closeTime"+day2+"").remove();
                $("#openTime"+day2+"").remove();*/
            $(".save_option_day_button" + day2 + count).hide();
            $("#discount" + day2 + count).attr('disabled', "true");
            $("#discount_type" + day2 + count).attr('disabled', "true");
            $("#type" + day2 + count).attr('disabled', "true");
            $("#closeTime" + day2 + count).attr('disabled', "true");
            $("#openTime" + day2 + count).attr('disabled', "true");
        }

    }

    $(".add_working_hours_restaurant_btn").click(function() {
        $(".working_hours_div").show();
    });

    var countAddhours = 1;

    function addMorehour(day, day2, count) {
        count = countAddhours;
        $(".restaurant_working_hour_" + day + "_div").show();

        $('#working_hour_table_' + day + ' tr:last').after('<tr id="row_' + day + count + '">' +
            '<td class="" style="width:50%;">' +
            '<input type="time" name="working_hours[' + day2 + '][' + count +
            '][from]" class="form-control" required>' +
            '</td>' +
            '<td class="" style="width:50%;">' +
            '<input type="time" name="working_hours[' + day2 + '][' + count +
            '][to]" class="form-control" required>' +
            '</td>' +
            '<td>' +
            '<button type="button" class="btn btn-danger" onclick="removeWorkingHourRow(\'' + day + '\',\'row_' +
            day + count + '\')">' +
            '<i class="fa fa-trash" title="Delete"></i>' +
            '</button>' +
            '</td>' +
            '</tr>');

        countAddhours++;
    }

    function removeWorkingHourRow(day, rowId) {
        $('#' + rowId).remove();
        let remainingRows = $('#working_hour_table_' + day + ' tr').length;

        // If only header remains or no rows, hide the block
        if (remainingRows <= 1) {
            $(".restaurant_working_hour_" + day + "_div").hide();
        }
    }

    // ✅ Copy Sunday to all days
    function copyMondayToAll() {
        if ($("#copy_monday_to_all").is(":checked")) {
            let mondayRows = $("#working_hour_table_Monday tr").not(":first").clone();
            let days = ['Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

            days.forEach(function(day) {
                $(".restaurant_working_hour_" + day + "_div").show();
                $("#working_hour_table_" + day + " tr").not(":first").remove();

                if (mondayRows.length > 0) {
                    let newRows = mondayRows.clone();
                    newRows.find("input, select").each(function() {
                        let name = $(this).attr("name");
                        if (name) {
                            $(this).attr("name", name.replace("Monday", day));
                        }
                    });
                    $("#working_hour_table_" + day).append(newRows);
                }
            });

        } else {
            let days = ['Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
            days.forEach(function(day) {
                $("#working_hour_table_" + day + " tr").not(":first").remove();
                $(".restaurant_working_hour_" + day + "_div").hide();
            });
        }
    }

    function addMoreFunctionhour(day1, day2, count) {
        var to = $("#to" + day2 + count).val();
        var from = $("#from" + day2 + count).val();
        if (to == '' || from == '') {
            $(".error_top").show();
            $(".error_top").html("");
            $(".error_top").append("<p>Please Enter valid time</p>");
            window.scrollTo(0, 0);

        } else {

            var timeslotworkVar = {
                'from': from,
                'to': to,
            };

            if (day1 == 'sunday') {
                timeslotworkSunday.push(timeslotworkVar);
            } else if (day1 == 'monday') {
                timeslotworkMonday.push(timeslotworkVar);
            } else if (day1 == 'tuesday') {
                timeslotworkTuesday.push(timeslotworkVar);
            } else if (day1 == 'wednesday') {
                timeslotworkWednesday.push(timeslotworkVar);
            } else if (day1 == 'thursday') {
                timeslotworkThursday.push(timeslotworkVar);
            } else if (day1 == 'friday') {
                timeslotworkFriday.push(timeslotworkVar);
            } else if (day1 == 'saturday') {
                timeslotworkSaturday.push(timeslotworkVar);
            }

            $(".save_option_day_button" + day2 + count).hide();
            $("#to" + day2 + count).attr('disabled', "true");
            $("#from" + day2 + count).attr('disabled', "true");
        }

    }

    function chkAlphabets2(event, msg) {
        if (!(event.which >= 48 && event.which <= 57)) {
            document.getElementById(msg).innerHTML = "Accept only Number";
            return false;
        } else {
            document.getElementById(msg).innerHTML = "";
            return true;
        }
    }

    function chkNumbers2(event, msg) {
        if (!(event.which > 64 && event.which < 91 || event.which > 96 && event.which < 123)) {
            document.getElementById(msg).innerHTML = "Accept only letters";
            return false;
        } else {
            document.getElementById(msg).innerHTML = "";
            return true;
        }
    }

    function deleteMedia(url) {
        if (confirm('Are you sure you want to delete this image?')) {
            const form = document.getElementById('delete-media-form');
            form.action = url;
            form.submit();
        }
    }
</script>
@endsection