@extends('user.layout')

@section('pagename')
    - {{ __('Service Form') }}
@endsection

@section('content')
    <style>
        body {
            background-color: #f0f2f5;
        }

        .emergency-box {
            background-color: #ffffff;
            border-radius: 6px;
            padding: 20px 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            color: #333;
            text-align: center;
            border: 1px solid #e0e0e0;
        }

        .select2-container--default .select2-selection--single {
            height: 35px;
            padding: 6px 12px;
            font-size: 1rem;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 35px;
        }

        .select2-container--default .select2-selection--single::placeholder {
            color: #000;
            font-weight: 500;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .alert {
            border-radius: 8px;
            font-size: 1.05rem;
            padding: 15px 20px;
            margin-bottom: 30px;
            text-align: center;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
        }

        .alert-warning {
            background-color: #fff3cd;
            color: #856404;
            font-weight: 500;
        }

        .form-header {
            background-color: #6c757d;
            color: #fff !important;
            padding: 8px 10px;
            border-radius: 6px;
            margin-bottom: 10px;
            font-size: 1.1rem;
            font-weight: bold;
            text-align: center;
            width: 100%;
        }

        .custome-btn {
            padding: 6px !important;
            margin-left: 10px;
        }

        @media (max-width: 767.98px) {
            .emergency-box {
                padding: 10px 5px;
            }

            .emergency-box .form-control,
            .emergency-box .btn-danger {
                padding: 10px 15px;
                font-size: 1rem;
            }

            .form-group.col-md-6 {
                width: 100%;
            }
        }

        #experience_table th {
            font-size: 16px;
            text-align: center;
        }
        label{
            font-size:16px;
        }
        input{
            height: 34px !important;
        }
        #previewButton{
            background-color: #74D8D8;
            border: 1px solid #74D8D8;
        }
        #previewButton:hover{
            color: #000;
        }
        #submitForm{
            background-color: #74D8D8 !important;
            border: 1px solid #74D8D8 !important;
            padding:8px !important;
        }
        #printPreview{
            background-color: #8e8edf !important;
            border: 1px solid #8e8edf !important;
            padding:8px !important;
        }
        .table td{
            font-size:14px;
        }
        p{
            font-size:14px;
        }
        li span{
            font-size:14px;
        }
    </style>


    @php
        $value = $user->email;
        $isEmail = filter_var($value, FILTER_VALIDATE_EMAIL);
        $isPhone = preg_match('/^\+?[0-9]{6,20}$/', $value); // basic phone check
    @endphp
    <section class="user-dashbord">
        <div class="container">
            <div class="row">
                <!--<div class="col-lg-3 col-md-4">-->
                <!--    {{-- Dashboard Options (Sidebar) --}}-->
                <!--    @include('user.inc.site_bar')-->
                <!--</div>-->

                <div class="col-md-12" style="margin-top:10px;">
                    <div class="container py-3">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                        <div class="row justify-content-center">
                            <div class="emergency-box">
                                <h3 class="font-bold">{{ $service->service_name }}</h3>
                                <h4>Hi, {{ $user->username }}
                                    <small> This is your serial number, {{ $user->user_sl }} pls remember this /
                                        এটা আপনার আইডি, দয়া করে মনে রাখবেন। <small>
                                </h4>
                                <form method="POST" action="{{ route('user-service-review-store') }}" class="text-left mt-4"
                                    id="service-order-form">
                                    @csrf

                                    <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                                    <input type="hidden" name="member_id" value="{{ auth()->user()->member->id }}">
                                    <input type="hidden" name="user_sl" value="{{ auth()->user()->user_sl }}">
                                    <input type="hidden" name="service_id" value="{{ $service->service_id }}">
                                    <input type="hidden" name="service_name" value="{{ $service->service_name }}">
                                    <input type="hidden" name="service_order_id" value="{{ $service->service_order_id }}">
                                    

                                    <div class="row">
                                        <div class="col-12 mb-3">
                                            <p class="form-header" style="background-color:#74D8D8">Service Review / সেবা প্রার্থীর মতামত </p>
                                        </div>

                                        <div class="form-group col-md-6">
                                            <label for="help_name"  > Select Service Review / সেবার মতামত নির্বাচন করুন </label>
                                            <select class="form-control" name="review_type">
                                                <option value=""></option>
                                                <option value="Extra ordinary">Extra ordinary / অসাধারন</option>
                                                <option value="Satisfied">Satisfied / সন্তুষ্টি</option>
                                                <option value="Average">Average / মোটামুটি</option>
                                                <option value="Unsatisfied">Unsatisfied / অসন্তুষ্ট</option>
                                                <option value="Comment">Comment / মন্তব্য</option>
                                            </select>
                                            @if ($errors->has('review_type'))
                                                <small class="text-danger">{{ $errors->first('review_type') }}</small>
                                            @endif
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="comment">
                                                Comment / সেবার মান উন্নয়নের আপনার পরামর্শ ( যদি থাকে)
                                            </label>
                                            <textarea name="comment" class="form-control" rows="1">{{ old('comment') }}</textarea>
                                            @if ($errors->has('comment'))
                                                <small class="text-danger">{{ $errors->first('comment') }}</small>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-12 d-flex justify-content-center">
                                            <button type="submit" class="btn btn-primary mt-4" id="previewButton">
                                                <i class="fa fa-book"></i> Preview
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="previewModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
                        <div id="previewArea">
                            
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="printPreview" class="btn btn-Primary" form="service-order-form">
                            Print
                        </button>
                        <button type="submit" id="submitForm" class="btn btn-success" form="service-order-form">
                            Confirm & Submit
                        </button>
                        <button type="button" id="closePreview" class="btn btn-secondary" data-dismiss="modal">Edit</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $('.datepicker').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            todayHighlight: true
        });
        $('#previewButton').on('click', function () {
            let formData = $('#service-order-form').serializeArray();
            let $table = $('#previewTable');
            $table.empty();
        
            $.each(formData, function (i, field) {
                if ($.trim(field.value) !== '') {
                    let row = $('<tr>');
                    row.append($('<td>').text(field.name));
                    row.append($('<td>').text(field.value));
                    $table.append(row);
                }
            });
        
            $('#previewModal').show(); // Or use .modal('show') if it's a Bootstrap modal
        
            $('html, body').animate({
                scrollTop: $('#previewModal').offset().top
            }, 500);
        });
        $(document).ready(function () {
            var $form = $('#service-order-form');
            var $previewButton = $('#previewButton');
            var $previewModal = $('#previewModal');
            var $previewContent = $('#previewArea'); // Updated to match your modal
            var $printPreview = $('#printPreview');
            var service_id = @json($service->id);
            var service_title = @json($service->title);
            var member_name = @json(auth()->user()->member->customer_name);
            var mobile_number = @json(auth()->user()->member->mobile_number);
            var passport_number = @json(auth()->user()->member->passport_number);
            var current_country = @json(auth()->user()->member->current_country);
            var currrent_state = @json(auth()->user()->member->currrent_state);
            var current_address = @json(auth()->user()->member->current_address);
            var help_name = @json($service->help_name);
            var relation_member = @json($service->relation_member ?? ' ');
            
            // Get today's date in dd-mm-yyyy format
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0'); // Months are zero-based
            var yyyy = today.getFullYear();
            today = dd + '-' + mm + '-' + yyyy;
            
            
            function validateSection(section) {
                let isValid = true;
                // Clear previous error messages
                section.find('.error-message').remove();
                section.find('input[required], select[required], textarea[required]').each(function() {
                    if (!$(this).val() || $(this).val().trim() === '') {
                        $(this).addClass('error');
                        const label = $(this).closest('.form-group').find('label').first();
                        label.after('<br><span class="error-message text-danger" style="font-size:14px;">This field is required</span>');
                        isValid = false;
                    } else {
                        $(this).removeClass('error');
                    }
                });
                return isValid;
            }
        
            $previewButton.on('click', function (e) {
                e.preventDefault();
                if (!validateSection($form)) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        text: 'Please fill all required fields before preview.',
                        confirmButtonText: 'OK'
                    });
                    return; // stop here if invalid
                }

        
                $previewContent.empty();
        
                // Collect form data
                let data = {};
                $.each($form.serializeArray(), function (i, field) {
                    data[field.name] = field.value || '—';
                });
        
                let html = `
                    <p class="text-center" style="border-bottom:1px solid;">সেবা প্রার্থীর মতামত / পরামর্শ ফরম</p>
                    <div style="padding:0; margin:30px 0px 0px 0px; font-size:16px;">
                        <div style="margin-bottom:8px; font-size:16px;">
                            ১.০ কর্মীর নামঃ <span style="border-bottom:1px dotted; display:inline-block; min-width:200px;">${member_name}</span>
                        </div>
                        <div style="margin-bottom:8px; font-size:16px;">
                            ২.০ পাসপোর্ট নম্বরঃ <span style="border-bottom:1px dotted; display:inline-block; min-width:150px;">${passport_number}</span> 
                            দেশের নামঃ <span style="border-bottom:1px dotted; display:inline-block; min-width:150px;">${current_country}</span>
                        </div>
                        <div style="margin-bottom:8px; font-size:16px;">
                            ৩.০ ঠিকানাঃ <span style="border-bottom:1px dotted; display:inline-block; min-width:300px;">${current_address}, ${currrent_state}</span>
                        </div>
                        <div style="margin-bottom:8px; font-size:16px;">
                            ৪.০ কর্মীর পক্ষে সেবা গ্রহণকারীর নামঃ <span style="border-bottom:1px dotted; display:inline-block; min-width:200px;">${help_name}</span>
                        </div>
                        <div style="margin-bottom:8px; font-size:16px;">
                            ৫.০ কর্মীর পক্ষে সেবা গ্রহণকারীর সম্পর্কঃ <span style="border-bottom:1px dotted; display:inline-block; min-width:200px;">${relation_member}</span>
                        </div>
                        <div style="margin-bottom:8px; font-size:16px;">
                            ৬.০ মোবাইল নম্বরঃ <span style="border-bottom:1px dotted; display:inline-block; min-width:200px;">${mobile_number}</span>
                        </div>
                        <div style="margin-bottom:8px; font-size:16px;">
                            ৭.০ কি ধরনের সেবা গ্রহণ করেছেনঃ <span style="border-bottom:1px dotted; display:inline-block; min-width:200px;">${service_title}</span>
                        </div>
                        <div style="margin-bottom:8px; font-size:16px;">
                            ৮.০ সেবার মান সম্পর্কে আপনার অভিব্যক্তিঃ <span style="border-bottom:1px dotted; display:inline-block; min-width:200px;">${data['review_type']}</span>
                        </div>
                        <div style="margin-bottom:8px; font-size:16px;">
                            ৯.০ সেবার মান উন্নয়নে আপনার পরামর্শ (যদি থাকে)ঃ <span style="border-bottom:1px dotted; display:inline-block; min-width:200px;">${data['comment']}</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-8"></div>
                        <div class="col-4">
                            <table style="width:100%; border:none;">
                                <tr><td>আবেদনকারীর নাম </td><td>:</td><td>${member_name}</td></tr>
                                <tr><td>তারিখ</td><td>:</td><td>${today}</td></tr>
                            </table>
                        </div>
                    </div>
                `;



                
                $previewContent.html(html);
        
                // Show the modal using Bootstrap
                $previewModal.modal('show');
                $('html, body').animate({ scrollTop: 0 }, 500);
            });
        
            $printPreview.on('click', function () {
                const printContents = $previewContent.html();
                const originalContents = $('body').html();
                $('body').html(`<h3 style="text-align:center; margin-bottom:5px;">{{ $service->title }}</h3>${printContents}`);
                window.print();
            });
        
            // Close modal when clicking outside (optional)
            $previewModal.on('click', function (e) {
                if ($(e.target).is($previewModal)) {
                    $previewModal.modal('hide');
                }
            });
        });



    </script>
    <script>
        $('.datepicker').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            todayHighlight: true
        });
    </script>
    <script>
        $(document).ready(function() {
            // Load all countries
            $.ajax({
                url: 'https://countriesnow.space/api/v0.1/countries/positions',
                method: 'GET',
                success: function(response) {
                    if (response.data) {
                        response.data.forEach(function(country) {
                            $('.foreign_country').append(
                                `<option value="${country.name}">${country.name}</option>`
                            );
                        });
                    }
                }
            });

            // Load states on country change
            $('#countrySelect').on('change', function() {
                const country = $(this).val();
                $('#stateSelect').html('<option value="">Loading...</option>');

                if (country) { // Only fetch if a country is selected
                    $.ajax({
                        url: 'https://countriesnow.space/api/v0.1/countries/states',
                        method: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            country: country
                        }),
                        success: function(response) {
                            $('#stateSelect').html('<option value="">Select State</option>');
                            if (response.data && response.data.states) {
                                response.data.states.forEach(function(state) {
                                    $('#stateSelect').append(
                                        `<option value="${state.name}">${state.name}</option>`
                                    );
                                });
                            }
                        },
                        error: function() {
                            $('#stateSelect').html(
                                '<option value="">Error loading states</option>');
                        }
                    });
                } else {
                    $('#stateSelect').html(
                        '<option value="">Select State</option>'); // Reset if no country selected
                }
            });

            // Initialize Select2
            $('.select-2').select2({
                width: '100%', // Ensure full width
                placeholder: function() {
                    // Dynamic placeholder based on field
                    if ($(this).attr('name') === 'country') return 'Select Country';
                    if ($(this).attr('name') === 'state') return 'Select State';
                    return '';
                },
                allowClear: true // Allows clearing selection
            });
        });

        $(document).ready(function() {
            $('#divisionSelect').on('change', function() {
                var divisionId = $(this).val();
                console.log(divisionId);
                $('#districtSelect').html('<option value="">Loading...</option>');
                $('#upazillaSelect').html('<option value="">Select Upazilla</option>');
                if (divisionId) {
                    $.ajax({
                        url: '/get-districts/' + divisionId,
                        type: 'GET',
                        success: function(data) {
                            $('#districtSelect').html(
                                '<option value="">Select District</option>');
                            $.each(data, function(key, district) {
                                $('#districtSelect').append('<option value="' + district
                                    .id + '">' + district.name + '</option>');
                            });
                        }
                    });
                }
            });

            // Load Upazillas on District Select
            $('#districtSelect').on('change', function() {
                var districtId = $(this).val();
                $('#upazillaSelect').html('<option value="">Loading...</option>');
                if (districtId) {
                    $.ajax({
                        url: '/get-upazillas/' + districtId,
                        type: 'GET',
                        success: function(data) {
                            $('#upazillaSelect').html(
                                '<option value="">Select Upazilla</option>');
                            $.each(data, function(key, upazilla) {
                                $('#upazillaSelect').append('<option value="' + upazilla
                                    .id + '">' + upazilla.name + '</option>');
                            });
                        }
                    });
                }
            });
        });
    </script>
@endsection