@extends('layouts.app')
@section('title', 'Edit Profile')
@section('content')
<style>
    .icon-collaps {
        float: right;
    }

    .update-btn {
        float: right;
    }
</style>
<link rel="stylesheet" href="{{asset('css/tempusdominus-bootstrap-4.min.css')}}">
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Edit Profile</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Edit Profile</h3>
                    </div>
                    <div class="card">
                        <!-- <div class="card-header">
                                <h3 class="card-title">Personal Information</h3>
                            </div>                             -->
                        <div class="card-body">
                            <div id="accordion">
                                <form id="userBasic">
                                    <input type="hidden" name="form_type" value="basic_detail">
                                    <div class="card card-secondary">
                                        <div class="card-header">
                                            <h4 class="card-title w-100">
                                                <a class="d-block w-100 accordian_class" data-toggle="collapse" href="#collapseOne">
                                                    Basic Details <span class="icon-collaps"><i class="fa fa-minus"></i></span>
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapseOne" class="collapse show" data-parent="#accordion">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label for="name">Name</label>
                                                            <input type="text" class="form-control" name="name" id="name" value="{{ $vendors->name ?? '' }}" placeholder="Enter name">
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label for="profile_photo">Logo</label>
                                                            <div class="input-group">
                                                                <div class="custom-file">
                                                                    <input type="file" class="custom-file-input" name="profile_photo" id="profile_photo">
                                                                    <label class="custom-file-label" for="profile_photo">Choose file</label>
                                                                </div>
                                                            </div>
                                                            @if(isset($vendors) && $vendors->profile_photo)
                                                            <img src="{{ asset('storage/vendors/mainimage/'.$vendors->profile_photo) }}" alt="Vendor Image" width="100" class="mt-2" onerror="this.onerror=null; this.src='{{ asset('images/default-image.png') }}';">
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label for="email">Email</label>
                                                            <input type="email" class="form-control" readonly name="email" id="email" value="{{ $vendors->email ?? '' }}" placeholder="Enter email">
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label for="email">Phone Number</label>
                                                            <input type="text" class="form-control" name="phone_number" id="phone_number" value="{{ $vendors->phone_number ?? '' }}" placeholder="Enter phone number">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label for="vendor_type">Vendot Type</label>
                                                            <select name="vendortype" class="form-control" disabled>
                                                                <option value="{{$vendors->vendor_type}}">{{$vendors->vendor_type == 1?'Individual':'Business'}}</option>
                                                            </select>
                                                        </div>
                                                    </div>                                                   
                                                </div>
                                            </div>
                                            <div class="card-footer">
                                                <button type="submit" id="storebasic" class="btn btn-primary update-btn">Update</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <form id="userAddress">
                                    <input type="hidden" name="form_type" value="address_details">
                                    <div class="card card-secondary">
                                        <div class="card-header">
                                            <h4 class="card-title w-100">
                                                <a class="d-block w-100 accordian_class" data-toggle="collapse" href="#collapseTwo">
                                                    Address Details <span class="icon-collaps"><i class="fa fa-plus"></i></span>
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapseTwo" class="collapse" data-parent="#accordion">
                                            <div class="card-body" id="address-container">
                                                <input type="hidden" id="form_type" value="vendor_profile">
                                                @foreach($vendors->addresses as $index => $address)
                                                <div class="address-section">
                                                    <input type="hidden" name="addresses[{{$index}}][id]" class="address_id" value="{{$address->user_address_id ?? 0}}">
                                                    <div class="row">
                                                        <input type="hidden" id="state_route" value="{{route('getStates')}}">
                                                        <input type="hidden" id="city_route" value="{{route('getCities')}}">
                                                        <div class="col-12 col-sm-2">
                                                            <div class="form-group">
                                                                <label>State</label>
                                                                <select class="form-control select2 states" name="addresses[{{$index}}][state]" style="width: 100%;">
                                                                    <option value="">Select State</option>
                                                                    @foreach($allQatarState as $key=>$state)
                                                                    <option value="{{$key}}" {{ (@$address->state_id) == $key ? 'selected' : '' }}>{{$state}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-sm-2">
                                                            <input type="hidden" id="saved_city" value="{{ $address->city_id??'' }}">
                                                            <div class="form-group">
                                                                <label>City</label>
                                                                <select class="form-control select2 city" name="addresses[{{$index}}][city]" style="width: 100%;">
                                                                    <option value="">Select City</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-sm-2">
                                                            <div class="form-group">
                                                                <label>Latitude</label>
                                                                <input type="text" name="addresses[{{$index}}][latitude]" class="form-control" value="{{$address->latitute ?? ''}}">
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-sm-2">
                                                            <div class="form-group">
                                                                <label>Longitude</label>
                                                                <input type="text" name="addresses[{{$index}}][longitude]" class="form-control" value="{{$address->longitude ?? ''}}">
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-sm-2">
                                                            <div class="form-group">
                                                                <label>Address</label>
                                                                <input type="text" name="addresses[{{$index}}][address]" class="form-control" value="{{$address->address ?? ''}}">
                                                            </div>
                                                        </div>
                                                        @if($vendors->vendor_type == 0 && $index == 0)
                                                        <div class="col-12 col-sm-2 mt-4">
                                                            <a href="javascript:void(0)" id="add-address" style="margin-top: 7px;" class="btn btn-success"><i class="fa fa-plus"></i></a>
                                                        </div>
                                                        @endif
                                                        @if($index != 0)
                                                        <div class="col-12 col-sm-2 mt-4">
                                                            <a href="javascript::void(0)" style="margin-top:7px" class="btn btn-danger remove-address">X</a>
                                                        </div>
                                                        @endif
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                            <div class="card-footer">
                                                <button type="submit" id="storeaddress" class="btn btn-primary update-btn">Update</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <form id="availability">
                                    <div class="card card-secondary">
                                        <div class="card-header">
                                            <h4 class="card-title w-100">
                                                <a class="d-block w-100 accordian_class" data-toggle="collapse" href="#collapseThree">
                                                Availability Details <span class="icon-collaps"><i class="fa fa-plus"></i></span>
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapseThree" class="collapse" data-parent="#accordion">
                                            <div class="card-body">
                                                <div class="row">                                                                
                                                @foreach ($structuredAvailability as $key=>$day)
                                                    <div class="col-12 col-sm-2 availability" data-index="{{$key}}">
                                                        <label>
                                                            <input type="checkbox" class="day-checkbox daycheck_{{$key}}" value="{{ $day->day }}" 
                                                                {{ $day->ischeck == 1 ? 'checked' : '' }}> 
                                                            {{ $day->day }}
                                                        </label>
                                                        <div class="form-group timeSection_{{$key}}" style="display: none;">
                                                            <!-- <label>Time picker:</label> -->
                                                            <div class="input-group date timepick timepicker_{{$key}}" id="timepicker_{{$key}}" data-target-input="nearest">
                                                                <input type="text" class="form-control datetimepicker-input fromtime_{{$key}}" value="{{$day->fromTime}}" data-target="#timepicker_{{$key}}"/>
                                                                <div class="input-group-append" data-target="#timepicker_{{$key}}" data-toggle="datetimepicker">
                                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                                </div>
                                                            </div>
                                                            <label>To</label>
                                                            <div class="input-group date timepick timepickerto_{{$key}}" id="timepickerto_{{$key}}" data-target-input="nearest">
                                                                <input type="text" class="form-control datetimepicker-input totime_{{$key}}" value="{{$day->toTime}}" data-target="#timepickerto_{{$key}}"/>
                                                                <div class="input-group-append" data-target="#timepickerto_{{$key}}" data-toggle="datetimepicker">
                                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach                                
                                                </div>
                                            </div>
                                            <div class="card-footer">
                                                <button type="button" id="storeavailability" class="btn btn-primary update-btn">Update</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@section('scripts')
<script src="{{asset('js/jquery.validate.min.js')}}"></script>
<script src="{{asset('js/additional-methods.min.js')}}"></script>
<script src="{{asset('js/moment.min.js')}}"></script>
<script src="{{asset('js/tempusdominus-bootstrap-4.min.js')}}"></script>
<script src="{{asset('js/custom.js')}}"></script>
<script>
    $(document).ready(function() {
        initializeSelect2();

        $('.timepick').datetimepicker({
            format: 'HH:mm',
            icons: {
                time: 'far fa-clock',
            }
        })

        $('.datetimepicker-input').on('click', function() {
            $(this).closest('.timepick').datetimepicker('show');
        });

        $('.availability').each(function(){ 
            var index = $(this).attr('data-index');
            if($(this).find('.daycheck_'+index).is(':checked')){
                $(this).find('.timeSection_'+index).show();
            }else{
                $(this).find('.timeSection_'+index).hide();
            }
        })

        $('.states').each(function(index, value) {
            var stateId = $(this).val();
            $(this).val(stateId).trigger('change');
        })

        $("#userBasic").validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 100
                },
                profile_photo: {
                    required: false,
                    extension: "jpg|jpeg|png|gif",
                    filesize: 1048576 // 1MB
                },
                email: {
                    required: true,
                    email: true,
                    remote: {
                        url: "{{ route('check-unique-field') }}",
                        type: "POST",
                        data: {
                            field_name: 'email',
                            field_value: function() {
                                return $("#email").val().trim();
                            },
                            user_id: "{{ $vendors->id ?? '' }}",
                            _token: "{{ csrf_token() }}"
                        }
                    }
                },
                phone_number: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 15,
                    pattern: /^(974)?[3-7]\d{7}$/,
                    remote: {
                        url: "{{ route('check-unique-field') }}",
                        type: "POST",
                        data: {
                            field_name: 'phone_number',
                            field_value: function() {
                                return $("#phone_number").val().trim();
                            },
                            user_id: "{{ $vendors->id ?? '' }}",
                            _token: "{{ csrf_token() }}"
                        }
                    }
                },
            },
            messages: {
                name: {
                    required: "Please enter a name",
                    maxlength: "Name cannot exceed 100 characters"
                },
                profile_photo: {
                    required: "Please upload an image",
                    extension: "Only image files (JPG, JPEG, PNG, GIF) are allowed",
                    filesize: "File must be less than 1MB"
                },
                email: {
                    required: "Please enter an email",
                    email: "Please enter a valid email",
                    remote: "This email is already taken."
                },
                phone_number: {
                    required: "Please enter a phone number",
                    digits: "Please enter only numbers",
                    minlength: "Phone number must be at least 10 digits",
                    maxlength: "Phone number cannot exceed 15 digits",
                    pattern: "Please enter a valid Qatar phone number",
                    remote: "This phone number is already taken."
                },
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) {
                let formData = new FormData(form);
                $.ajax({
                    url: "{{ route('updateprofile') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status) {
                            toastr.success(response.message);
                        } else if (response.isvalid) {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        console.log('Basic Details Error:', xhr);
                    }
                });
            }
        });

        $("#userAddress").validate({
            rules: {
                "addresses[0][state]": {
                    required: true
                },
                "addresses[0][city]": {
                    required: true
                },
                "addresses[0][latitude]": {
                    required: true
                },
                "addresses[0][longitude]": {
                    required: true,
                },
                "addresses[0][address]": {
                    required: true
                }
            },
            messages: {
                "addresses[0][state]": {
                    required: "Please select a state"
                },
                "addresses[0][city]": {
                    required: "Please select a city"
                },
                "addresses[0][latitude]": {
                    required: "Please enter latitude",
                    number: "Latitude must be a number"
                },
                "addresses[0][longitude]": {
                    required: "Please enter longitude",
                    number: "Longitude must be a number"
                },
                "addresses[0][address]": {
                    required: "Please enter an address"
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                if (element.hasClass("select2-hidden-accessible")) {
                    error.addClass('invalid-feedback');
                    element.next(".select2-container").after(error);
                } else {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                }
            },
            highlight: function(element) {
                if ($(element).hasClass("select2-hidden-accessible")) {
                    $(element).next(".select2-container").find(".select2-selection").addClass('is-invalid');
                } else {
                    $(element).addClass('is-invalid');
                }
            },
            unhighlight: function(element) {
                if ($(element).hasClass("select2-hidden-accessible")) {
                    $(element).next(".select2-container").find(".select2-selection").removeClass('is-invalid');
                } else {
                    $(element).removeClass('is-invalid');
                }
            },
            submitHandler: function(form) {
                let formData = new FormData(form);
                $.ajax({
                    url: "{{ route('updateprofile') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status) {
                            if (response.data.length > 0) {
                                $('.address-section').each(function(index) {
                                    $(this).find('.address_id').val(response.data[index]);
                                })
                            }
                            toastr.success(response.message);
                        } else if (response.isvalid) {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        toastr.error("Something went wrong.");
                        console.log('Basic Details Error:', xhr);
                    }
                });
            }
        });

        $.validator.addMethod("selectRequired", function(value, element) {
            return value !== "" && value !== "Select Country" && value !== "Select State" && value !== "Select City";
        }, "This field is required");

        $('#profile_photo').on('change', function() {
            var fileName = $(this).val().split("\\").pop();
            $(this).next('.custom-file-label').addClass("selected").html(fileName);
        });

        $.validator.addMethod('filesize', function(value, element, param) {
            return this.optional(element) || (element.files[0].size <= param);
        }, 'File size must be less than 1MB.');

        $("#add-address").on('click', function() {
            let index = $(".address-section").length;
            let newAddress = `
            <div class="address-section">
                <input type="hidden" name="addresses[${index}][id]" class="address_id" value="0">
                <div class="row">
                    <div class="col-12 col-sm-2">
                        <div class="form-group">
                            <label>State</label>
                            <select class="form-control select2 states" name="addresses[${index}][state]" style="width: 100%;">
                                <option value="">Select State</option>
                                @foreach($allQatarState as $key=>$state)
                                <option value="{{$key}}">{{$state}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-sm-2">
                        <div class="form-group">
                            <label>City</label>
                            <select class="form-control select2 city" name="addresses[${index}][city]" style="width: 100%;">
                                <option value="">Select City</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-sm-2">
                        <div class="form-group">
                            <label>Latitude</label>
                            <input type="text" name="addresses[${index}][latitude]" class="form-control">
                        </div>
                    </div>
                    <div class="col-12 col-sm-2">
                        <div class="form-group">
                            <label>Longitude</label>
                            <input type="text" name="addresses[${index}][longitude]" class="form-control">
                        </div>
                    </div>
                    <div class="col-12 col-sm-2">
                        <div class="form-group">
                            <label>Address</label>
                            <input type="text" name="addresses[${index}][address]" class="form-control">
                        </div>
                    </div>
                    <div class="col-12 col-sm-2 mt-4">
                        <a href="javascript::void(0)" style="margin-top:7px" class="btn btn-danger remove-address">X</a>
                    </div>
                </div>
            </div>`;

            $("#address-container").append(newAddress);
            $('.states, .city').select2({
                placeholder: "Select an option",
                allowClear: true
            });
        });

        $(document).on('click', '.remove-address', function() {
            $(this).closest(".address-section").remove();
        });

        $('.accordian_class').on('click', function() {
            var icon = $(this).find(".icon-collaps i");

            if (icon.hasClass("fa-plus")) {
                $(".icon-collaps i").removeClass("fa-minus").addClass("fa-plus");
                icon.removeClass("fa-plus").addClass("fa-minus");
            } else {
                icon.removeClass("fa-minus").addClass("fa-plus");
            }
        })

        $('.day-checkbox').on('change',function(){
            var index = $(this).closest('.availability').attr('data-index');
            if($(this).is(':checked')){
                $(this).closest('.availability').find('.timeSection_'+index).show();
            }else{
                $(this).closest('.availability').find('.timeSection_'+index).hide();
                $(this).closest('.availability').find('.error_time').remove();
            }
        })

        $("#storeavailability").on('click',function(e){
            e.preventDefault();
            let availability = [];
            var error =false;
            $('.error_time').remove();
            $('.availability').each(function(index,value){
                var key = $(this).attr('data-index');
                var isCheck = $(this).find('.daycheck_'+key).is(':checked')?1:0;
                var days = $(this).find('.daycheck_'+key).val();
                var fromTime = isCheck == 1 ?$(this).find('.fromtime_'+key).val():'';                    
                var toTime = isCheck == 1 ?$(this).find('.totime_'+key).val():'';
                if(isCheck){
                    if(fromTime == '' || toTime == ''){
                        $(this).find('.timeSection_'+key).after('<span class="error_time" style="color:red">Please enter time.</span>')
                        error=true;
                    }                        
                }
                availability.push({day:days,ischeck:isCheck,fromTime:fromTime,toTime:toTime});
            });
            if(error){
                return false;
            }else{
                $.ajax({
                    url: "{{ route('updateprofile') }}",
                    type: "POST",
                    data: {form_type:'availability_details',availability:availability},
                    dataType: "json",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status) {
                            toastr.success(response.message);
                        } else if (response.isvalid) {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        console.log('Basic Details Error:', xhr);
                    }
                });   
            }
        })
            

    });

    function initializeSelect2() {
        $(".states, .city").each(function() {
            if ($(this).hasClass("select2-hidden-accessible")) {
                $(this).select2('destroy');
            }
            $(this).select2({
                placeholder: "Select an option",
                allowClear: true
            });
        });
    }
</script>
@endsection