@extends('admin.layout.page-app')
@section('page_title', __('label.edit_department'))
@section('tab_title', __('label.edit_department'))

@section('content')
	@include('admin.layout.sidebar')

	<div class="right-content">
		@include('admin.layout.header')

		<div class="body-content">
			<!-- mobile title -->
			<h1 class="page-title-sm">{{__('label.edit_department')}}</h1>

			<div class="border-bottom row">
				<div class="col-sm-10">
					<ol class="breadcrumb">
						<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{__('label.dashboard')}}</a></li>
						<li class="breadcrumb-item"><a href="{{ route('department.index') }}">{{__('label.department')}}</a></li>
						<li class="breadcrumb-item active" aria-current="page">{{__('label.edit_department')}}</li>
					</ol>
				</div>
				<div class="col-sm-2 d-flex align-items-center justify-content-end">
					<a href="{{ route('department.index') }}" class="btn btn-default mw-120" style="margin-top:-14px">{{__('label.department')}}</a>
				</div>
			</div>

            <form id="edit_department" enctype="multipart/form-data">
                <!-- Department Info -->
                <div class="card custom-border-card mt-3">
                    <h5 class="card-header">{{__('label.department_info')}}</h5>
                    <div class="card-body">
                        <input type="hidden" name="id" value="{{$result['id']}}">
                        <div class="form-row">
                            <div class="col-md-8">
                                <div class="form-row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{__('label.name')}}<span class="text-danger">*</span></label>
                                            <input type="text" name="name" class="form-control" value="{{$result->name}}" placeholder="{{__('label.name_here')}}" autofocus>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>{{__('label.country_code')}}<span class="text-danger">*</span></label>
                                            <input name="country_code" type="text" value="{{$result->country_code}}" class="form-control" placeholder="{{__('label.+91')}}">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>{{__('label.mobile_number')}}<span class="text-danger">*</span></label>
                                            <input name="mobile_number" type="text" value="{{$result->mobile_number}}" class="form-control" placeholder="{{__('label.mobile_number_here')}}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{__('label.department_color')}}<span class="text-danger">*</span></label>
                                            <div class="input-group colorpicker-component">
                                                <input type="text" id="hexcolor-1" class="form-control hexcolor" value="{{$result->department_color}}" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$">
                                                <input type="color" id="colorpicker-1" name="department_color" value="{{$result->department_color}}" class="colorpicker" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{__('label.telephone_number')}}</label>
                                            <input name="telephone_number" type="text" value="{{$result->telephone_number}}" class="form-control" placeholder="{{__('label.telephone_number_here')}}">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>{{__('label.description')}}<span class="text-danger">*</span></label>
                                            <textarea type="text" name="description" class="form-control" placeholder="{{__('label.description_here')}}">{{$result->description}}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group ml-4">
                                    <label>{{__('label.department_icon')}}<span class="text-danger">*</span></label>
                                    <div class="avatar-upload">
                                        <div class="avatar-edit">
                                            <input type='file' name="department_icon" id="imageUpload" accept=".png, .jpg, .jpeg" />
                                            <label for="imageUpload" title="{{__('label.upload_file')}}"></label>
                                        </div>
                                        <div class="avatar-preview">
                                            <img src="{{$result->department_icon}}" id="imagePreview">
                                        </div>
                                    </div>
                                    <input type="hidden" name="old_department_icon" value="{{$result->department_icon}}">
                                    <label class="mt-3 text-gray">{{__('label.max_size_5mb')}}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Address -->
                <div class="card custom-border-card">
					<h5 class="card-header">{{__('label.address')}}</h5>
					<div class="card-body">
						<div class="form-row">
							<div class="col-4">
								<div class="form-group">
									<label>{{__('label.address')}}</label>
									<input name="address" type="text" value="{{$result->address}}" class="form-control" placeholder="{{__('label.address_here')}}">
								</div>
							</div>
							<div class="col-4">
								<div class="form-group">
									<label>{{__('label.area')}}</label>
									<input name="area" type="text" value="{{$result->area}}" class="form-control" placeholder="{{__('label.area_here')}}">
								</div>
							</div>
							<div class="col-4">
								<div class="form-group">
									<label>{{__('label.city')}}</label>
									<input name="city" type="text" value="{{$result->city}}" class="form-control" placeholder="{{__('label.city_here')}}">
								</div>
							</div>
							<div class="col-4">
								<div class="form-group">
									<label>{{__('label.state')}}</label>
									<input name="state" type="text" value="{{$result->state}}" class="form-control" placeholder="{{__('label.state_here')}}">
								</div>
							</div>
							<div class="col-4">
								<div class="form-group">
									<label>{{__('label.country')}}</label>
									<input name="country" type="text" value="{{$result->country}}" class="form-control" placeholder="{{__('label.country_here')}}">
								</div>
							</div>
							<div class="col-4">
								<div class="form-group">
									<label>{{__('label.pincode')}}</label>
									<input name="pincode" type="text"  value="{{$result->pincode}}"class="form-control" placeholder="{{__('label.pincode_here')}}">
								</div>
							</div>
							<div class="col-4">
								<div class="form-group">
									<label>{{__('label.latitude')}}</label>
									<input name="latitude" type="text" value="{{$result->latitude}}" class="form-control" placeholder="{{__('label.latitude_here')}}">
								</div>
							</div>
							<div class="col-4">
								<div class="form-group">
									<label>{{__('label.longitude')}}</label>
									<input name="longitude" type="text" value="{{$result->longitude}}" class="form-control" placeholder="{{__('label.longitude_here')}}">
								</div>
							</div>
						</div>
					</div>
				</div>
                <!-- Working Time & Other Image -->
                <div class="card custom-border-card">
                    <h5 class="card-header">{{__('label.working_time')}}</h5>
                    <div class="card-body">
                        @php
                            $days = [
                                1 => __('label.monday'),
                                2 => __('label.tuesday'),
                                3 => __('label.wednesday'),
                                4 => __('label.thursday'),
                                5 => __('label.friday'),
                                6 => __('label.saturday'),
                                7 => __('label.sunday'),
                            ];
                        @endphp
                        @foreach($days as $dayNumber => $dayLabel)
                            @php
                                $startTime = $work_time[$dayNumber - 1]['start_time'] ?? '00:00';
                                $endTime = $work_time[$dayNumber - 1]['end_time'] ?? '00:00';
                                $status = $work_time[$dayNumber - 1]['status'] ?? 0;
                            @endphp
                            <div class="form-row">
                                <div class="col-2">
                                    <h6 class="pl-3 pt-1">{{ $dayLabel }}</h6>
                                </div>
                                <div class="col-3">
                                    <div class="form-group">
                                        <div class="radio-group">
                                            <div class="custom-control custom-radio">
                                                <input type="radio" name="day_{{ $dayNumber }}" id="day_{{ $dayNumber }}_off" class="custom-control-input" value="0" {{ ($status == '0')? "checked" : "" }}>
                                                <label class="custom-control-label" for="day_{{ $dayNumber }}_off">{{ __('label.off') }}</label>
                                            </div>
                                            <div class="custom-control custom-radio">
                                                <input type="radio" name="day_{{ $dayNumber }}" id="day_{{ $dayNumber }}_on" class="custom-control-input" value="1" {{ ($status == '1')? "checked" : "" }}>
                                                <label class="custom-control-label" for="day_{{ $dayNumber }}_on">{{ __('label.on') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="form-group">
                                        <input name="start_time_{{ $dayNumber }}" type="time" value="{{ $startTime }}" class="form-control" {{ ($status == '0')? "readonly" : "" }}>
                                    </div>
                                </div>
                                <div class="col-1 text-center">
                                    <h6 class="pt-3">{{ __('label.to') }}</h6>
                                </div>
                                <div class="col-3">
                                    <div class="form-group">
                                        <input name="end_time_{{ $dayNumber }}" type="time"  value="{{ $endTime }}" class="form-control" {{ ($status == '0')? "readonly" : "" }}>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                   
                <div class="pt-3 text-right">
                    <button type="button" class="btn btn-default mw-120" onclick="update_department()">{{__('label.save')}}</button>
                    <a href="{{route('department.index')}}" class="btn btn-cancel mw-120 ml-2">{{__('label.cancel')}}</a>
                    <input type="hidden" name="_method" value="PATCH">
                </div>
            </form>
		</div>
	</div>
@endsection

@section('pagescript')
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

	<script>
        $(document).ready(function() {
            // Color Picker
                // Event handler for color picker input change
                $('.colorpicker').on('input', function() {
                    var target = $(this).attr('id').split('-')[1];
                    $('#hexcolor-' + target).val(this.value.toUpperCase());
                });

                // Event handler for hex color input change
                $('.hexcolor').on('input', function() {
                    var target = $(this).attr('id').split('-')[1];
                    const hexPattern = /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
                    if (hexPattern.test(this.value)) {
                        $('#colorpicker-' + target).val(this.value);
                    }
                });

            // Working Time
            const days = ['day_1', 'day_2', 'day_3', 'day_4', 'day_5', 'day_6', 'day_7'];
            days.forEach((day, index) => {
                const dayOnRadio = document.getElementById(`${day}_on`);
                const dayOffRadio = document.getElementById(`${day}_off`);
                const startTime = document.querySelector(`input[name="start_time_${index + 1}"]`);
                const endTime = document.querySelector(`input[name="end_time_${index + 1}"]`);

                // Enable/disable time fields based on radio selection
                const toggleTimeFields = () => {
                    if (dayOnRadio.checked) {
                        startTime.removeAttribute('readonly');
                        endTime.removeAttribute('readonly');
                    } else {
                        startTime.setAttribute('readonly', 'readonly');
                        endTime.setAttribute('readonly', 'readonly');
                        startTime.value = "00:00";
                        endTime.value = "00:00";
                    }
                };

                // Add event listeners to toggle fields
                dayOnRadio.addEventListener('change', toggleTimeFields);
                dayOffRadio.addEventListener('change', toggleTimeFields);
            });
        });

		function update_department(){

            var Demo_Mode = '<?php echo Demo_Mode(); ?>';
            if(Demo_Mode == 1){

                $("#dvloader").show();
                var formData = new FormData($("#edit_department")[0]);
                $.ajax({
                    type:'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url:'{{ route("department.update", [$result->id]) }}',
                    data:formData,
                    cache:false,
                    contentType: false,
                    processData: false,
                    success:function(resp){
                        $("#dvloader").hide();
                        get_responce_message(resp, 'edit_department', '{{ route("department.index") }}');
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $("#dvloader").hide();
                        toastr.error(errorThrown, textStatus);
                    }
                });
            } else {
                showError();
            }
        }

	</script>
@endsection