@extends('layouts.admin')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ !empty($journey->id) ? 'Edit' : 'Create' }} Journey</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.journey') }}">Journey</a></li>
                    <li class="breadcrumb-item active">{{ !empty($journey->id) ? 'Edit' : 'Create' }} Journey</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-body">
                <form class="tablelist-form {{ !empty($journey->id) ? 'edit-form' : '' }}" autocomplete="off" action="{{ route('admin.journey.store') }}" method="post" enctype="multipart/form-data" novalidate name="journeyForm" id="journeyForm">
                    @csrf
                    <input type="hidden" id="id" name="id" value="{{ $journey->id ?? '' }}">
                    <input type="hidden" name="company_id" value="{{ $company_id }}">
                    
                    <div class="row">
                        <!-- Basic Journey Info -->
                        <div class="mb-3 col-lg-6">
                            <label for="title" class="form-label">Journey Title*</label>
                            <input type="text" id="title" name="title" value="{{ $journey->title ?? old('title') }}" class="form-control" placeholder="E.g., Summer Vacation 2023" required />
                        </div>
                        <div class="mb-3 col-lg-6">
                            <label for="small_description" class="form-label">Small Description</label>
                            <textarea id="small_description" name="small_description" class="form-control" placeholder="Enter a brief description" rows="4">{{ $journey->small_description ?? old('small_description') }}</textarea>
                        </div>


                        
                        <div class="mb-3 col-lg-6">
                            <label for="user_id" class="form-label">Organizer*</label>
                            <select id="user_id" name="user_id" class="form-select" required>
                                <option value="">Select Organizer</option>
                                @foreach($users as $user)
                                    <option data-company="{{ $user->company_id }}" value="{{ $user->id }}" {{ ($journey->user_id ?? old('user_id')) == $user->id ? 'selected' : '' }} >
                                        {{ $user->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="mb-3 col-lg-6">
                            <label for="destination" class="form-label">Destination*</label>
                            <input type="text" id="destination" name="destination" value="{{ $journey->destination ?? old('destination') }}" class="form-control" placeholder="E.g., Paris, France" required />
                        </div>
                        
                        <div class="mb-3 col-lg-6">
                            <label for="accommodation" class="form-label">Accommodation</label>
                            <input type="text" id="accommodation" name="accommodation" value="{{ $journey->accommodation ?? old('accommodation') }}" class="form-control" placeholder="E.g., Grand Hotel" />
                        </div>
                        
                        <div class="mb-3 col-lg-6">
                            <label for="accommodation_link" class="form-label">Accommodation URL</label>
                            <input type="url" id="accommodation_link" name="accommodation_link" value="{{ $journey->accommodation_link ?? old('accommodation_link') }}" class="form-control" placeholder="https://example.com" />
                        </div>
                        
                        <div class="mb-3 col-lg-6">
                            <label for="map_link" class="form-label">Map Link</label>
                            <input type="url" id="map_link" name="map_link" value="{{ $journey->map_link ?? old('map_link') }}" class="form-control" placeholder="https://maps.example.com" />
                        </div>
                        
                        <!-- Date Range -->
                        <div class="mb-3 col-lg-6">
                            <label for="start_date" class="form-label">Start Date*</label>
                            <input type="text" id="start_date" name="start_date" value="{{ isset($journey) && is_object($journey) && $journey->start_date ? $journey->start_date->format('d-m-Y') : old('start_date') }}" class="form-control" required />
                        </div>
                        
                        <div class="mb-3 col-lg-6">
                            <label for="end_date" class="form-label">End Date*</label>
                            <input type="text" id="end_date" name="end_date" value="{{ isset($journey) && is_object($journey) && $journey->end_date ? $journey->end_date->format('d-m-Y') : old('end_date') }}" class="form-control" required />
                        </div>
                        <div class="mb-3 col-lg-6 d-none">
                            <label for="cost" class="form-label">Cost</label>
                            <input type="number" id="cost" name="cost" value="{{ $journey->cost ?? old('cost') }}" class="form-control" placeholder="E.g., 500.00" step="0.01" min="0" />
                        </div>
                        
                        <!-- Participants Multiselect -->
                        <div class="mb-3 col-lg-12">
                            <label for="participants" class="form-label">Participants</label>
                            <select id="participants" name="participants[]" class="form-control select2" multiple="multiple">
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" 
                                        {{ (isset($journey) && $journey->participants->contains($user->id)) || 
                                           (is_array(old('participants')) && in_array($user->id, old('participants'))) ? 'selected' : '' }}>
                                        {{ $user->name }} ({{ $user->email }})
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">Participant count: <span id="participantCount">0</span></small>
                        </div>
                    </div>
                    
                    <div class="hstack gap-2 justify-content-between">
                       <a href="{{ url()->previous() }}" class="btn btn-back">Back</a>

                        <button type="submit" class="btn btn-success" id="submitBtn">
                            {{ !empty($journey->id) ? 'Update' : 'Create' }} Journey
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
    

<!-- Bootstrap Datepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

    
    <script type="text/javascript">
    $(document).ready(function() {
        $('#start_date').datepicker({
        format: 'dd-mm-yyyy', // This will enforce the dd-mm-yyyy format
        startDate: '0d',       // Prevent selecting past dates (0d means today)
        autoclose: true        // Automatically close the datepicker once a date is selected
    });

    $('#end_date').datepicker({
        format: 'dd-mm-yyyy', // This will enforce the dd-mm-yyyy format
        startDate: '0d',       // Prevent selecting past dates (0d means today)
        autoclose: true        // Automatically close the datepicker once a date is selected
    });

        // Initialize Select2 for participants
        $('.select2').select2({
            placeholder: "Select participants",
            allowClear: true
        });

        // Update participant count when selection changes
        $('#participants').on('change', function() {
            $('#participantCount').text($(this).val() ? $(this).val().length : 0);
        });

        // Initialize count on page load
        $('#participantCount').text($('#participants').val() ? $('#participants').val().length : 0);
        var companyId = "{{ $company_id }}";
        if (companyId) {
            
            $('#user_id option').each(function () {
                if ($(this).data('company') != companyId) {
                   // $(this).prop('disabled', true);
                }else{
                    $(this).prop('selected', true);
                }
            });
        }
        $('#user_id').on('change', function () {
            var selectedOrganizerId = $(this).val();

            // Enable all participants options first
            $('#participants option').prop('disabled', false);

            // Disable the organizer from the participants list
            $('#participants option').each(function () {
                if ($(this).val() == selectedOrganizerId) {
                    $(this).prop('disabled', true); // Disable the organizer in participants
                }
            });

            // Remove organizer from the participants list if selected
            var currentParticipants = $('#participants').val();
            if (currentParticipants.includes(selectedOrganizerId)) {
                var updatedParticipants = currentParticipants.filter(function (val) {
                    return val !== selectedOrganizerId;
                });
                $('#participants').val(updatedParticipants).trigger('change');
            }
        });
        $('#user_id').trigger('change');

        // ✅ Move custom method here:
        $.validator.addMethod("dateFormat", function(value, element) {
            if (!value) return true;
            return /^\d{2}-\d{2}-\d{4}$/.test(value);
        }, "Please enter date in dd-mm-yyyy format");

        $.validator.addMethod("startDateNotPast", function(value, element) {
            if (!value) return true;
            var parts = value.split("-");
            var inputDate = new Date(parts[2], parts[1] - 1, parts[0]);
            var today = new Date();
            today.setHours(0, 0, 0, 0);
            return inputDate >= today;
        }, "Start date cannot be in the past");

        $.validator.addMethod("greaterThanStart", function(value, element, param) {
            var startDate = $(param).val();
            if (!value || !startDate) return true;
            var partsStart = startDate.split("-");
            var partsEnd = value.split("-");
            var start = new Date(partsStart[2], partsStart[1] - 1, partsStart[0]);
            var end = new Date(partsEnd[2], partsEnd[1] - 1, partsEnd[0]);
            return end >= start;
        }, "End date must be after start date");
        

        // Form validation
        $("#journeyForm").validate({

            rules: {
                title: {
                    required: true,
                    minlength: 3,
                },
                small_description: {
                    required: true,
                    minlength: 10,
                },
                user_id: {
                    required: true,
                },
                destination: {
                    required: true,
                    minlength: 3,
                },
                start_date: {
                    required: true,
                    dateFormat: true,
                    startDateNotPast: true
                },
                end_date: {
                    required: true,
                    dateFormat: true,
                    greaterThanStart: "#start_date"
                },
                cost: {
                    required: false,
                    number: true,
                    min: 1
                },
                accommodation_link: {
                    required: true,
                    url: true
                },
                map_link: {
                    required: true,
                    url: true
                },
                participants: {
                    required: true,
                    minlength: 1
                },

                accommodation: {
                    required: true, 
                    minlength: 3 
                },
                


            },
            messages: {
                title: {
                    required: "Please enter journey title",
                    minlength: "Title must be at least 3 characters"
                },
                small_description: {
                    required: "Please enter journey description",
                    minlength: "Title must be at least 10 characters"
                },
                user_id: {
                    required: "Please select an organizer"
                },
                destination: {
                    required: "Please enter destination",
                    minlength: "Destination must be at least 3 characters"
                },
               
                cost: {
                    number: "Please enter a valid cost",
                    min: "Cost cannot be negative"
                },
                accommodation_link: {
                    required: "Please enter accommodation URL",
                    url: "Please enter a valid URL"
                },
                map_link: {
                    required: "Please enter map URL",
                    url: "Please enter a valid URL"
                },
                participants: {
                    required: "Please select at least one participant",
                    minlength: "Please select at least one participant"
                },
                accommodation: {
                    required: "Please enter accommodation name",
                    minlength: "Accommodation name should be at least 3 characters long"
                },
                start_date: {
                    required: "Please select start date",
                    dateFormat: "Start date must be in dd-mm-yyyy format",
                    startDateNotPast: "Start date cannot be in the past"
                },
                end_date: {
                    required: "Please select end date",
                    dateFormat: "End date must be in dd-mm-yyyy format",
                    greaterThanStart: "End date must be after start date"
                }


            },
            onkeyup: function(element) {

                $(element).valid();
                if ($('#participants').val() == null || $('#participants').val().length == 0) {
                    $('#participants-error').remove();
                
                   $('#participants').after('<label id="participants-error" class="error" for="participants">Please select at least one participant.</label>');
                    
                    return false; // stop submit
                }
            },
            onfocusout: function(element) {
                $(element).valid();
                if ($('#participants').val() == null || $('#participants').val().length == 0) {
                    $('#participants-error').remove();
                
                   $('#participants').after('<label id="participants-error" class="error" for="participants">Please select at least one participant.</label>');
                    
                    return false; // stop submit
                }
            },
            errorPlacement: function(error, element) {
                if (element.hasClass('select2-hidden-accessible')) {
                    error.insertAfter(element.next('span.select2'));
                } else {
                    error.insertAfter(element);
                }
                if ($('#participants').val() == null || $('#participants').val().length == 0) {
                    $('#participants-error').remove();
                
                   $('#participants').after('<label id="participants-error" class="error" for="participants">Please select at least one participant.</label>');
                    
                    return false; // stop submit
                }
            },
            submitHandler: function(form) {
                if ($('#participants').val() == null || $('#participants').val().length == 0) {
                    $('#participants-error').remove();
                
                   $('#participants').after('<label id="participants-error" class="error" for="participants">Please select at least one participant.</label>');
                    
                    return false; // stop submit
                }
                let formData = new FormData(form);

                $.ajax({
                    url: form.action,
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    success: function(response) {
                        Swal.fire({
                            iconHtml: `<img src="{{ asset('assets/images/success-circle.svg') }}" class="img-fluid">`,
                            text: response.message,
                            confirmButtonText: "OK",
                            customClass: {
                                confirmButton: 'custom-ok-button-class w-sm'
                            }
                        }).then(() => {
                           // window.location.href = "{{ route('admin.journey', ['id' => $company_id]) }}";
                           window.location.href = "{{ route('admin.journey') }}";
                        });
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                let field = $(`[name="${key}"]`);
                                field.addClass("error");
                                field.after(`<label class="error">${value[0]}</label>`);
                            });
                        } else {
                            Swal.fire({
                                text: "Something went wrong. Please try later",
                                iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                                confirmButtonText: "OK",
                                customClass: {
                                    confirmButton: 'custom-ok-button-class w-sm'
                                }
                            });
                        }
                    }
                });

                return false;
            },
            invalidHandler: function(event, validator) {
                var firstInvalidField = $(validator.errorList[0].element);
                $('html, body').animate({
                    scrollTop: firstInvalidField.offset().top - 100
                }, 500);
            }
        });
    });
</script>

@endsection