File Manager

X7ROOT File Manager

Current Path: /home/hamdjcne/app.hamdalillahitravel.com/app/Views/tour

home / hamdjcne / app.hamdalillahitravel.com / app / Views / tour /

ðŸ“ ..
ðŸ“„ package.php(44.25 KB)
ðŸ“„ package_form.php(3.02 KB)

Editing: package.php

<?php
    use App\Models\Crud;
    $this->Crud = new Crud();
?>

<?=$this->extend('designs/backend');?>
<?=$this->section('title');?>
    <?=$title;?>
<?=$this->endSection();?>

<?=$this->section('content');?>

<div class="app-wrapper  d-flex " style="margin-left: 1px; ">
    
    <div class="app-container  container-fluid ">
        
        <div class="app-main flex-column flex-row-fluid " id="kt_app_main">
            
            <div class="d-flex flex-column flex-column-fluid">

<div id="kt_app_toolbar" class="app-toolbar ">

<div class="d-flex flex-stack flex-row-fluid">
                        
                        <div class="d-flex flex-column flex-row-fluid">

<ul class="breadcrumb breadcrumb-separatorless fw-semibold mb-3">

<li class="breadcrumb-item text-gray-600 fw-bold lh-1">
                                    <a href="<?=site_url(); ?>" class="text-white text-hover-success">
                                        <i class="ki-duotone ki-home text-gray-500 fs-2"></i> </a>
                                </li>

<li class="breadcrumb-item">
                                    <i class="ki-duotone ki-right fs-3 text-gray-500 mx-n1"></i>
                                </li>

<li class="breadcrumb-item text-gray-600 fw-bold lh-1">
                                    Tour Package </li>
                            </ul>
                            <div class="page-title d-flex align-items-center me-3">
                                
                                <h1
                                    class="page-heading d-flex text-gray-900 fw-bolder fs-1 flex-column justify-content-center my-0">
                                    Tour Package List
                                </h1>
                                
                            </div>
                            
                        </div>

</div>
                    
                </div>

<div id="kt_app_content" class="app-content">
                    <div class="card my-4" id="table_view">

<div class="card-header border-0 pt-6">
                            
                            <div class="card-title">
                                
                                <div class="d-flex align-items-center position-relative my-1">
                                    <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5"><span
                                            class="path1"></span><span class="path2"></span></i> <input type="text"
                                        data-kt-customer-table-filter="search" id="search" 
                                        class="form-control form-control-solid w-250px ps-12"
                                        placeholder="Search Package" />
                                </div>
                                
                            </div>

<div class="card-toolbar">
                                
                                <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                                    
                                    <button type="button" class="btn btn-light-success me-3"
                                        data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                        <i class="ki-duotone ki-filter fs-2"><span class="path1"></span><span
                                                class="path2"></span></i> Filter
                                    </button>
                                    <a href="javascript::" class="btn btn-light-info me-3">
                                        <i class="ki-duotone ki-plus-circle fs-2"><span class="path1"></span><span
                                                class="path2"></span></i>Create Package
                                    </a>
                                    
                                    <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true"
                                        id="kt-toolbar-filter">
                                        
                                        <div class="px-7 py-5">
                                            <div class="fs-4 text-gray-900 fw-bold">Filter Options</div>
                                        </div>

<div class="separator border-gray-200"></div>

<div class="px-7 py-5">
                                            
                                            <div class="mb-10">
                                               
                                                <label class="form-label fs-5 fw-semibold mb-3">Status:</label>
                                                
                                                <select class="form-select" id="status" data-control="select2" data-placeholder="Select a Status"  >
                                                    <option value="all">All Status</option>
                                                    <option value="Pending">Pending</option>
                                                    <option value="Approved">Approved</option>
                                                </select>
                                            </div>

<div class="mb-10">
                                                
                                                <label class="form-label fs-5 fw-semibold mb-3">Date Range:</label>
                                                <input class="form-control form-control-solid kt_daterangepicker_4" placeholder="Pick date rage" id="datez" />

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

</div>

</div>
                            
                        </div>

<div class="card-body pt-0 table-responsive">
                           
                            
                            <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_customers_table">
                                <thead>
                                    <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                        <th class="min-w-125px">Date Created</th>
                                        <th class="min-w-200px">Tour Title</th>
                                        <th class="min-w-150px">Location</th>
                                        <th class="min-w-200px">Duration</th>
                                        <th class="min-w-100px">Group Size</th>
                                        <th class="min-w-125px">Tour Type</th>
                                        <th class="min-w-125px">Starting Price</th>
                                        <th class="text-end min-w-100px">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="fw-semibold text-gray-600" id="load_data" >
                                   
                                </tbody>
                                <tfoot id="loadmore" ></tfoot>
                            </table>
                            
                        </div>
                        
                    </div>
                    <div class="card my-4" id="message_view" style="display: none;">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between mb-12">
                                
                                <i
                                    class="ki-duotone ki-file-added fs-4qx text-success ms-n2 me-3"><span
                                        class="path1"></span><span class="path2"></span></i>

<div class="d-flex flex-column  " id="header_resp">
                                    
                                </div>
                                <div class="d-flex flex-column  text-right">
                                    <a href="javascript:;" class="me-2 btn btn-icon btn-danger btn-active-color-light btn-sm" data-bs-toggle="tooltip" title="View Booking" onclick="back_ticket()" >
                                        <i class="ki-outline ki-arrow-left fs-2"></i>
                                    </a>
                                </div>
                                
                            </div>
                            <?php echo form_open_multipart('tour/package/manage', array('id'=>'bb_ajax_form', 'class'=>'')); ?>
                                
                                <input type="hidden" name="tour_id" id="tour_id" value="">

<h3 class="mb-5" id="name">Create Tour Package</h3>

<div class="row mb-5">
                                    <div class="col-md-6">
                                        <label class="form-label">Tour Title</label>
                                        <input type="text" class="form-control" name="title" id="title" required />
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Tour Type</label>
                                        <div class="d-flex">
                                            <select class="form-select" data-control="select2" data-placeholder="Select an option" name="tour_type" id="tour_type_select">
                                                <option value="">Select Tour Type</option>
                                                <?php
                                                    $type = $this->Crud->read_order('tour_type', 'name', 'asc');
                                                    if(!empty( $type )) {
                                                        foreach( $type as $ty ) {
                                                            echo '<option value="'.$ty->id.'">'.ucwords($ty->name).'</option>';
                                                        }
                                                    }
                                                    
                                                ?>
                                            </select>
                                            
                                        </div>
                                        <button type="button" class="btn btn-light-primary " onclick="addNewTourType()">Add New</button>
                                    </div>
                                </div>

<div class="row mb-5">
                                    <div class="col-md-6">
                                        <label class="form-label">Group Size</label>
                                        <input type="text" class="form-control" name="group_size" id="group_size" />
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Language</label>
                                        <input type="text" class="form-control" name="language" id="language" value="English" />
                                    </div>
                                </div>

<div class="row mb-5">
                                    <div class="col-md-6">
                                        <label class="form-label">Location</label>
                                        <input type="text" class="form-control" name="location" id="location" />
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Start Date</label>
                                        <input type="text" class="form-control kt_daterangepicker_3" name="start_date" id="start_date" />
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">End Date</label>
                                        <input type="text" class="form-control kt_daterangepicker_3" name="end_date" id="end_date" />
                                    </div>
                                </div>

<div class="mb-5">
                                    <label class="form-label">Description</label>
                                    <textarea class="form-control" name="description" id="description" rows="4"></textarea>
                                </div>

<div class="mb-5">
                                    <label class="form-label">Inclusions</label>
                                    <input class="form-control kt_tagify_1"  name="inclusions" id="inclusions"  value=""/>
                                </div>

<div class="mb-5">
                                    <label class="form-label">Exclusions</label>
                                    <input class="form-control kt_tagify_1" value="" name="exclusions" id="exclusions" />
                                </div>

<div class="mb-5">
                                    <label class="form-label">Requirements</label>
                                    <input class="form-control kt_tagify_1" name="requirements" id="requirements"  value=""/>
                                </div>
                                <div class="mb-5">
                                    <label class="form-label">Payment Details</label>
                                    <textarea class="form-control" name="payment_details" id="payment_details" rows="4"></textarea>
                                </div>
                                <div class="mb-5">
                                    <label class="form-label">Terms and Condition</label>
                                    <textarea class="form-control" name="terms_conditions" id="terms_conditions" rows="4"></textarea>
                                </div>

<h4 class="mb-3">Tour Itinerary</h4>
                                <div id="itinerary_section"></div>
                                <button type="button" class="btn btn-light-success mb-5" id="addItineraryBtn">Add Day</button>

<h4 class="mb-3">Tour Pricing</h4>
                                <div id="pricing_section"></div>
                                <button type="button" class="btn btn-light-warning mb-5" id="addPriceBtn">Add Price Tier</button>
                                
                                <hr class="my-7">
                                <div class="row mb-5">
                                    <div class="col-md-6">
                                        <label class="form-label">Thumbnail Image</label>
                                        <input type="file" class="form-control" name="thumbnail" id="thumbnail" accept="image/*" />
                                        <div id="thumbnail_preview" class="mt-3"></div> 
                                    </div>

<div class="col-md-6">
                                        <label class="form-label">Gallery Images (Multiple)</label>
                                        <input type="file" class="form-control" name="gallery[]" id="gallery" accept="image/*" multiple />
                                        <div id="gallery_preview" class="row mt-3"></div> 
                                    </div>
                                </div>

<div class="mt-10">
                                    <button type="submit" class="btn btn-primary" id="saveBtn">Save Tour</button>
                                    <button type="button" class="btn btn-secondary" onclick="back_ticket()">Cancel</button>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12"><div id="bb_ajax_msg"></div></div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div id="view_tour_view" class="card my-4" style="display: none;">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between mb-12">
                                
                                <i
                                    class="ki-duotone ki-file-added fs-4qx text-success ms-n2 me-3"><span
                                        class="path1"></span><span class="path2"></span></i>

<div class="d-flex flex-column  " id="header_resp">
                                    
                                </div>
                                <div class="d-flex flex-column  text-right">
                                    <a href="javascript:;" class="me-2 btn btn-icon btn-danger btn-active-color-light btn-sm" data-bs-toggle="tooltip" title="View Booking" onclick="back_ticket()" >
                                        <i class="ki-outline ki-arrow-left fs-2"></i>
                                    </a>
                                </div>
                                
                            </div>
                            <div id="view_tour_content">
                                
                            </div>
                            <div class="text-end mt-5">
                                <button type="button" class="btn btn-primary" onclick="back_ticket()">Back to Tours</button>
                            </div>
                        </div>
                    </div>

</div>

</div>
            
            <div id="kt_app_footer" class="app-footer  d-flex flex-column flex-md-row align-items-center flex-center flex-md-stack ">
                <div class="text-gray-900 order-2 order-md-1">
                    <span class="text-gray-500 fw-semibold me-1"><?=date('Y'); ?>&copy;</span>
                    <a href="javascript:;" target="_blank"
                        class="text-gray-500 text-hover-success"><?=app_name; ?></a>
                </div>
            </div>
            
        </div>
    </div>
    
</div>

// Attach event listeners
        $("#datez").on("change", load_order); // Date change event
        $("#search").on("input", load_order); // Search input event
        $("#status").on("change", load_order); // Status dropdown change event 
        
        
        // Load Order Function
        function load_order(x, y) {
            var more = 'no';
            var methods = '';
            if (parseInt(x) > 0 && parseInt(y) > 0) {
                more = 'yes';
                methods = '/' + x + '/' + y;
            }

if (more === 'no') {
                $('#load_data').html('<tr><td colspan="8"><div class="col-sm-12 fs-2 text-center" data-kt-indicator="on"><span class="indicator-progress">Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span></div></td></tr>');
                $('#total_id').html('<div class="col-sm-12 text-center"><span class="ni ni-loader fa-spin"></span></div>');
            } else {
                $('#loadmore').html('<tr><td colspan="8"><div class="col-sm-12 fs-2 text-center" data-kt-indicator="on"><span class="indicator-progress">Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span></div></td></tr>');
            }

var search = $('#search').val() || '';
            var status = $('#status').val() || '';
            const dateRange = $('#datez').val();

let start_date = '';
            let end_date = '';

if (dateRange) {
                const dates = dateRange.split(' - '); // Split by " - "
                if (dates.length === 2) {
                    start_date = formatToYYYYMMDD(dates[0].trim());
                    end_date = formatToYYYYMMDD(dates[1].trim());
                }
            }

$.ajax({
                url: site_url + 'tour/package/load' + methods,
                type: 'POST',
                data: { 
                    search: search, 
                    status: status, 
                    start_date: start_date, 
                    end_date: end_date 
                },
                success: function (data) {
                    var dt = JSON.parse(data);
                    if (more === 'no') {
                        $('#load_data').html(dt.item);
                    } else {
                        $('#load_data').append(dt.item);
                    }

if (dt.offset > 0) {
                        $('#loadmore').html('<tr><td colspan="8"><a href="javascript:;" class="btn btn-dim btn-light btn-block p-30" onclick="load_order(' + dt.limit + ', ' + dt.offset + ', \'' + order_type + '\');"><i class="ki-duotone ki-arrows-loop"><span class="path1"></span><span class="path2"></span></i> Load More</a></td></tr>');
                    } else {
                        $('#loadmore').html('');
                    }
                },
                complete: function () {
                    $.getScript(site_url + '/assets/js/jsmodal.js');
                }
            });
        }

// Format Date to YYYY-MM-DD
        function formatToYYYYMMDD(dateString) {
            const date = new Date(dateString);
            if (isNaN(date.getTime())) return ''; // Return empty string if invalid date
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // Month is zero-based
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    });

$(document).ready(function () {
    
    //-------------------------------
    // Switch Between Views
    //-------------------------------
    $('.btn-light-info').on('click', function (e) {
        e.preventDefault();
        $('#table_view').hide(500);
        $('#message_view').show(500);
        $('#view_tour_view').hide(500);
        $('#name').html('Create Tour Package');
    });

window.back_ticket = function() {
        $('#table_view').show(500);
        $('#message_view').hide(500);
        $('#view_tour_view').hide(500);
    };

//-------------------------------
    // Gallery Image Upload Handling
    //-------------------------------
    let galleryFiles = [];

// Thumbnail Preview
    $('#thumbnail').on('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#thumbnail_preview').html(`
                    <img src="${e.target.result}" class="img-fluid rounded" style="max-height: 200px;" alt="Thumbnail Preview">
                `);
            };
            reader.readAsDataURL(file);
        }
    });

// Gallery Multiple Image Preview + Remove
    $('#gallery').on('change', function(e) {
        galleryFiles = Array.from(e.target.files);
        renderGalleryPreviews();
    });

$('#gallery_preview').on('click', '.remove-gallery-image', function() {
        const index = $(this).data('index');
        galleryFiles.splice(index, 1);
        renderGalleryPreviews();
    });

//-------------------------------
    // Itinerary Handling
    //-------------------------------
    $('#addItineraryBtn').click(function() {
        const html = `
            <div class="day-group mb-5 border p-4 rounded">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="day_range[]" placeholder="Day(s) e.g. Day 1-3" required />
                    </div>
                    <div class="col-md-8">
                        <input type="text" class="form-control" name="day_title[]" placeholder="Activity Title e.g. Visit White House" required />
                    </div>
                </div>
                <div class="mb-3">
                    <textarea class="form-control" name="day_description[]" placeholder="Day Description" rows="3" required></textarea>
                </div>
                <div class="text-end">
                    <button type="button" class="btn btn-danger btn-sm delete-day-btn" style="display: none;">
                        <i class="ki-outline ki-trash"></i> Delete
                    </button>
                </div>
            </div>
        `;
        $('#itinerary_section').append(html);
        updateItineraryButtons();
    });

$('#itinerary_section').on('click', '.delete-day-btn', function() {
        $(this).closest('.day-group').fadeOut(300, function() {
            $(this).remove();
            updateItineraryButtons();
        });
    });

//-------------------------------
    // Pricing Handling
    //-------------------------------
    $('#addPriceBtn').click(function() {
        const html = `
            <div class="price-group row mb-3 align-items-center p-3 border rounded">
                <div class="col-md-5 mb-2 mb-md-0">
                    <input type="text" class="form-control" name="price_label[]" placeholder="Label (e.g. Single Room)" required />
                </div>
                <div class="col-md-5 mb-2 mb-md-0">
                    <input type="number" class="form-control" name="amount[]" placeholder="Amount (e.g. 3600000)" required />
                </div>
                <div class="col-md-2 text-end">
                    <button type="button" class="btn btn-danger btn-sm delete-price-btn" style="display: none;">
                        <i class="ki-outline ki-trash"></i> Delete
                    </button>
                </div>
            </div>
        `;
        $('#pricing_section').append(html);
        updatePriceButtons();
    });

$('#pricing_section').on('click', '.delete-price-btn', function() {
        $(this).closest('.price-group').fadeOut(300, function() {
            $(this).remove();
            updatePriceButtons();
        });
    });

//-------------------------------
    // Add New Tour Type Dynamically
    //-------------------------------
    window.addNewTourType = function() {
        const newType = prompt("Enter new Tour Type:");
        if (newType) {
            let exists = false;
            $('#tour_type_select option').each(function() {
                if ($(this).val().toLowerCase() === newType.toLowerCase()) {
                    exists = true;
                    return false;
                }
            });

if (exists) {
                alert('Tour Type already exists.');
                $('#tour_type_select').val(newType);
                return;
            }

$.ajax({
                url: site_url + 'tour/package/createTourType',
                method: 'POST',
                data: { tour_type: newType },
                success: function(response) {
                    if (response.status === 'success') {
                        $('#tour_type_select').append(`<option value="${newType}">${newType}</option>`);
                        $('#tour_type_select').val(newType);
                        alert('Tour Type added successfully.');
                    } else if (response.status === 'exists') {
                        alert('Tour Type already exists in the database.');
                        $('#tour_type_select').val(newType);
                    } else {
                        alert('Failed to add Tour Type.');
                    }
                },
                error: function() {
                    alert('Server error. Could not add Tour Type.');
                }
            });
        }
    };

//-------------------------------
    // Edit Tour Function (Load Tour Data)
    //-------------------------------
    window.editTour = function(tour_id) {
        $.ajax({
            url: site_url + "tour/package/manage/edit/" + tour_id,
            method: "GET",
            success: function(respons) {
                var response = JSON.parse(respons);
                if (response.status == 'success') {
                    const tour = response.data;

$('#name').html('Edit Tour Package');
                    $('#tour_id').val(tour.id);
                    $('#title').val(tour.title);
                    $('#group_size').val(tour.group_size);
                    $('#language').val(tour.language);
                    $('#location').val(tour.location);
                    $('#start_date').val(tour.start_date);
                    $('#end_date').val(tour.end_date);
                    $('#description').val(tour.description);
                    $('#inclusions').val(tour.inclusions);
                    $('#exclusions').val(tour.exclusions);
                    $('#requirements').val(tour.requirements);
                    $('#payment_details').val(tour.payment_details);
                    $('#terms_conditions').val(tour.terms_conditions);

$('#tour_type_select').val(tour.tour_type).trigger('change');

$('#itinerary_section').html('');
                    $('#pricing_section').html('');
                    $('#gallery_preview').html('');

// Load Itinerary
                    if (tour.itinerary && tour.itinerary.length > 0) {
                        $.each(tour.itinerary, function(index, day) {
                            const deleteButton = (index !== 0) ? `
                                <div class="text-end">
                                    <button type="button" class="btn btn-danger btn-sm delete-day-btn">
                                        <i class="ki-outline ki-trash"></i> Delete
                                    </button>
                                </div>
                            ` : '';

$('#itinerary_section').append(`
                                <div class="day-group mb-5 border p-4 rounded">
                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" name="day_range[]" value="${day.day_range}" placeholder="Day(s) e.g. Day 1-3" required />
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" name="day_title[]" value="${day.title}" placeholder="Activity Title e.g. Visit White House" required />
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <textarea class="form-control" name="day_description[]" rows="3" placeholder="Day Description" required>${day.description}</textarea>
                                    </div>
                                    ${deleteButton}
                                </div>
                            `);
                        });
                        updateItineraryButtons();
                    }

// Load Pricing
                    if (tour.prices && tour.prices.length > 0) {
                        $.each(tour.prices, function(index, price) {
                            const deleteBtn = (index !== 0) ? `
                                <div class="col-auto">
                                    <button type="button" class="btn btn-danger btn-sm delete-price-btn">
                                        <i class="ki-outline ki-trash"></i>
                                    </button>
                                </div>
                            ` : '';

$('#pricing_section').append(`
                                <div class="price-group mb-5 border p-4 rounded">
                                    <div class="row g-3 align-items-center">
                                        <div class="col">
                                            <input type="text" class="form-control mb-2" name="price_label[]" value="${price.price_label}" placeholder="Label (e.g. Single Room)" required />
                                        </div>
                                        <div class="col">
                                            <input type="number" class="form-control" name="amount[]" value="${price.amount}" placeholder="Amount (e.g. 360000)" required />
                                        </div>
                                        ${deleteBtn}
                                    </div>
                                </div>
                            `);
                        });
                        updatePriceButtons();
                    }

// Load Gallery
                    if (tour.gallery_images && tour.gallery_images.length > 0) {
                        const galleryImages = JSON.parse(tour.gallery_images);
                        $.each(galleryImages, function(index, image) {
                            $('#gallery_preview').append(`
                                <div class="gallery-thumb d-inline-block m-2">
                                    <img src="${site_url}uploads/tours/gallery/${image}" class="rounded" style="width:100px;height:100px;object-fit:cover;">
                                </div>
                            `);
                        });
                    }

$('#table_view').hide(500);
                    $('#message_view').show(500);
                } else {
                    alert('Failed to fetch tour details.');
                }
            }
        });
    };
    
    window.viewTour = function(tour_id) {
    $.ajax({
        url: site_url + "tour/package/manage/view/" + tour_id,
        method: "GET",
        success: function(respons) {
            var response = JSON.parse(respons);
            if (response.status == 'success') {
                const tour = response.data;

let html = `
                    <h2 class="mb-5">${tour.title}</h2>
                    
                    <div class="row mb-4">
                        <div class="col-md-6 mb-3">
                `;

if (tour.thumbnail_url) {
                    html += `
                        <img src="${site_url}uploads/tours/thumbnails/${tour.thumbnail_url}" class="img-fluid rounded shadow" alt="Thumbnail">
                    `;
                } else {
                    html += `<p>No Thumbnail Available</p>`;
                }

html += `
                        </div>
                        <div class="col-md-6">
                            <h5>Location: <span class="fw-bold">${tour.location}</span></h5>
                            <h5>Group Size: <span class="fw-bold">${tour.group_size}</span></h5>
                            <h5>Language: <span class="fw-bold">${tour.language}</span></h5>
                            <h5>Duration: <span class="fw-bold">${tour.start_date} ➔ ${tour.end_date}</span></h5>
                        </div>
                    </div>
                    
                    <div class="mb-5">
                        <h4>About this Tour</h4>
                        <p>${tour.description}</p>
                    </div>
                `;

// Inclusions
                html += `<div class="mb-5"><h4>Inclusions</h4><ul>`;
                try {
                    const inclusions = JSON.parse(tour.inclusions);
                    inclusions.forEach(function(inc) {
                        html += `<li>${inc.value}</li>`;
                    });
                } catch (e) {
                    html += `<li>${tour.inclusions}</li>`;
                }
                html += `</ul></div>`;

// Exclusions
                html += `<div class="mb-5"><h4>Exclusions</h4><ul>`;
                try {
                    const exclusions = JSON.parse(tour.exclusions);
                    exclusions.forEach(function(exc) {
                        html += `<li>${exc.value}</li>`;
                    });
                } catch (e) {
                    html += `<li>${tour.exclusions}</li>`;
                }
                html += `</ul></div>`;

// Requirements
                html += `<div class="mb-5"><h4>Requirements</h4><ul>`;
                try {
                    const requirements = JSON.parse(tour.requirements);
                    requirements.forEach(function(req) {
                        html += `<li>${req.value}</li>`;
                    });
                } catch (e) {
                    html += `<li>${tour.requirements}</li>`;
                }
                html += `</ul></div>`;

// Itinerary
                html += `<div class="mb-5"><h4>Itinerary</h4><ul class="list-group">`;
                if (tour.itinerary && tour.itinerary.length > 0) {
                    tour.itinerary.forEach(function(day) {
                        html += `
                            <li class="list-group-item">
                                <strong>${day.day_range}: ${day.title}</strong><br/>
                                ${day.description}
                            </li>
                        `;
                    });
                } else {
                    html += `<li class="list-group-item">No itinerary available.</li>`;
                }
                html += `</ul></div>`;

// Pricing
                html += `<div class="mb-5"><h4>Pricing</h4><div class="row">`;
                if (tour.prices && tour.prices.length > 0) {
                    tour.prices.forEach(function(price) {
                        html += `
                            <div class="col-md-4 mb-3">
                                <div class="border rounded p-3">
                                    <h5 class="mb-2">${price.price_label}</h5>
                                    <p class="mb-0"><strong>₦${parseFloat(price.amount).toLocaleString()}</strong></p>
                                </div>
                            </div>
                        `;
                    });
                } else {
                    html += `<div class="col-12"><p>No pricing available.</p></div>`;
                }
                html += `</div></div>`;

// Payment Details (New Section)
                if (tour.payment_details) {
                    html += `
                        <div class="mb-5">
                            <h4>Payment Details</h4>
                            <p>${tour.payment_details}</p>
                        </div>
                    `;
                }

// Terms and Conditions (New Section)
                if (tour.terms_conditions) {
                    html += `
                        <div class="mb-5">
                            <h4>Terms & Conditions</h4>
                            <p>${tour.terms_conditions}</p>
                        </div>
                    `;
                }

// Gallery
                if (tour.gallery_images && tour.gallery_images.length > 0) {
                    const gallery = JSON.parse(tour.gallery_images);
                    html += `<div class="mb-5"><h4>Gallery</h4><div class="row">`;

gallery.forEach(function(image) {
                        html += `
                            <div class="col-6 col-md-3 mb-3">
                                <img src="${site_url}uploads/tours/gallery/${image}" class="img-fluid rounded shadow-sm" alt="Gallery Image">
                            </div>
                        `;
                    });

html += `</div></div>`;
                }

$('#view_tour_content').html(html);

// Switch View
                $('#table_view').hide(500);
                $('#message_view').hide(500);
                $('#view_tour_view').show(500);
            } else {
                alert('Failed to fetch tour details.');
            }
        }
    });
};

});

</script>

X7ROOT File Manager

Editing: package.php

Upload File

Create Folder