@extends('admin.dash_layouts.main')
@section('title')
    {{ 'Dashboard page' }}
@endsection
@section('content')
    <style>
        .newhotel {
            display: none;
        }
    </style>
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="content-page">
        <!-- Start content -->
        <div class="content">
            <div class="container-fluid">
                <div class="page-title-box">
                    <div class="row align-items-center ">
                        <div class="col-md-8">
                            <div class="page-title-box">
                                <h4 class="page-title">Tour Sales Manage</h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                        <a href="#">Dashboard</a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <a href="#">Tour Sales</a>
                                    </li>
                                    <li class="breadcrumb-item active">Add Tour Sales</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end page-title -->

                {{-- 
                @if (session()->has('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        {{ session()->get('success') }}
                    </div>
                @endif --}}


                {{-- @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <ul class="list-unstyled">
                            @foreach ($errors->all() as $error)
                                <li> {{ $error }} </li>
                            @endforeach
                        </ul>
                    </div>
                @endif --}}
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <form action="/tour-adding" id="myForm" enctype="multipart/form-data" method="post">
                                    @csrf
                                    <div class="form-group">
                                        <label for="example-text-input" class="col-sm-2 col-form-label">Name</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" readonly type="text" value="{{ $data->name }}"
                                                name="name" required>
                                            <input class="form-control" readonly type="hidden" value="{{ $data->id }}"
                                                name="clientid" required>

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="example-text-input" class="col-sm-2 col-form-label">Email</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" type="email" value="{{ $data->email }}"
                                                name="email" required>

                                        </div>
                                    </div>
                                    <h4 class="mt-0 header-title"> </h4>
                                    <div class="">
                                        <div class="dynamic-table">
                                            <table class="table table-bordered responsive" id="dynamic-table">
                                                <thead>
                                                    <tr>
                                                        <th>Date</th>
                                                        <th>location</th>

                                                        <th>Spectial Note</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            Date <input class="form-control " type="Date" required
                                                                name="date[0]">
                                                            <input type="hidden" name="day[0]" value="1"> <br>

                                                            <div class="weatherdispay"></div>

                                                            <button class="weather  btn btn-secondary">weather</button>

                                                        </td>
                                                        <td>
                                                            Destination<input class="form-control pac-target-input"
                                                                type="text" required name="h_place[0] "> <br>
                                                            <button class="hotel-btn btn btn-secondary">hotel</button>
                                                            <div class="newhotel">
                                                                Name<input class="form-control " type="text"
                                                                    name="hotel[0] ">
                                                                <br> Contact <input class="form-control " type="text"
                                                                    name="h_contact[0] "><br> Address <input
                                                                    class="form-control " type="text"
                                                                    name="h_address[0] ">
                                                                <br> Price<input class="form-control " type="text"
                                                                    name="h_price[0] "> <br>
                                                            </div>


                                                        </td>

                                                        <td><input class="form-control " type="text" name="h_note[0]">
                                                        </td>
                                                        <td> <button class="btn-success btn add-row" id="">Add
                                                                Row</button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 col-form-label">Detail</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" required type="text" placeholder=" "
                                                name="deatil">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 col-form-label">Currency</label>
                                        <div class="col-sm-10">
                                            <select class="form-control" name="currency" id="">
                                                <option class="form-control" value="USD"> USD</option>
                                                <option class="form-control" value="GBP"> GBP</option>
                                                <option class="form-control" value="EUR"> EUR</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 col-form-label">Pre Paid</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" required type="number" step="any"
                                                placeholder=" " name="prepaid">
                                        </div>
                                    </div>
                                    <table class="table table-bordered responsive" id="dynamic-invoice">
                                        <thead>
                                            <tr>
                                                <th>Invoice</th>
                                                <th>Amount</th>
                                                <th>Action</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><input type="text" class="form-control " required
                                                        name="invoice[0]"></td>
                                                <td><input type="number" step="any" class="form-control " required
                                                        name="amount[0]"></td>
                                                <td> <button class="btn btn-warning" id="add-invoice-row">Add Row</button>
                                                </td>

                                            </tr>
                                        </tbody>
                                    </table>

                                    <div class="form-group mb-0">
                                        <div>
                                            <button type="submit" id="submitBtn"
                                                class="btn btn-primary waves-effect waves-light">
                                                Submit
                                            </button>
                                            <a href="{{ url()->previous() }}" type="reset"
                                                class="btn btn-secondary waves-effect m-l-5">
                                                Back
                                            </a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- end col -->
                </div>
            </div>
            <!-- container-fluid -->
        </div>
        <!-- content -->
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize the autocomplete for the input field with class 'pac-target-input'
            var destinationInput = document.querySelector('.pac-target-input');
            var autocomplete = new google.maps.places.Autocomplete(destinationInput, {
                componentRestrictions: {
                    country: 'LK' // 'LK' is the country code for Sri Lanka
                }
            });

            // Function to initialize Autocomplete for a specific row
            function initializeAutocompleteForNewRow(row) {
                var destinationInput = row.find('.pac-target-input')[0];
                var autocomplete = new google.maps.places.Autocomplete(destinationInput, {
                    componentRestrictions: {
                        country: 'LK' // 'LK' is the country code for Sri Lanka
                    }
                });
            }

            var i = 0; // Initialize i to 0
            var d = 1;


            $('#dynamic-table').on('click', '.weather', function(event) {
                event.preventDefault();
                var row = $(this).closest('tr');
                var date = row.find('input[name^="date["]').val();
                var destination = row.find('.pac-target-input').val();
                var weatherDisplay = row.find('.weatherdispay');
                // Use the Google Places API to get the place details, including latitude and longitude
                var geocoder = new google.maps.Geocoder();

                geocoder.geocode({
                    'address': destination
                }, function(results, status) {
                    if (status === 'OK') {
                        var location = results[0].geometry.location;
                        var lat = location.lat();
                        var lon = location.lng();

                        var dateObj = new Date(date + ' 15:00:00');
                        var dt = dateObj.getTime() / 1000;

                        const currentDate = new Date().toJSON().slice(0, 10);
                        const currentDateObject = new Date(currentDate);
                        const futureDateObject = new Date(currentDateObject);
                        futureDateObject.setDate(currentDateObject.getDate() + 4);
                        const futureDateString = futureDateObject.toJSON().slice(0, 10);
                        var apiKey = "e7e9cc3e59e45f90b4c8b7bddcd88e48";

                        if (date > futureDateString) {
                            var apiUrl =
                                "https://api.openweathermap.org/data/3.0/onecall/day_summary?lat=" +
                                lat +
                                "&lon=" + lon + "&date=" + date + "&appid=" + apiKey;
                            $.get(apiUrl, function(data) {
                                // Access the properties correctly from the 'data' object
                                var cloud_cover = data.cloud_cover.afternoon;
                                var humidity = data.humidity.afternoon;
                                var mintemperature = data.temperature.min;
                                var maxtemperature = data.temperature.max;
                                var pressure = data.pressure.afternoon;
                                var maxwind = data.wind.max.speed;

                                // Find the 'weatherdispay' element within the current row
                                var weatherDisplay = row.find('.weatherdispay');

                                // Display weather information in the 'weatherdispay' element of the current row
                                weatherDisplay.html('Cloud Cover: ' + cloud_cover +
                                    '<br>Humidity: ' + humidity +
                                    '<br>Min Temperature: ' + mintemperature +
                                    '<br>Max Temperature: ' + maxtemperature +
                                    '<br>Pressure: ' + pressure +
                                    '<br>Max Wind: ' + maxwind);
                            });
                        } else {
                            var apiUrl =
                                "https://api.openweathermap.org/data/3.0/onecall/timemachine?lat=" +
                                lat +
                                "&lon=" + lon + "&dt=" + dt + "&appid=" + apiKey;

                            $.get(apiUrl, function(data) {

                                var weatherData = data.data[0].weather;
                                var main = weatherData[0].main;
                                var description = weatherData[0].description;
                                console.log(data);
                                // Find the 'weatherdispay' element within the current row


                                // Display weather information in the 'weatherdispay' element
                                weatherDisplay.html('Weather: ' + main + ', ' +
                                    description);
                            });
                        }
                    } else {
                        console.error("Geocoding failed: " + status);
                    }
                });
            });

            // Add Row button click event
            $(document).ready(function() {
                // Event delegation for dynamically added elements
                $('#dynamic-table').on('click', '.delete-row', function() {
                    $(this).closest('tr').remove();
                });

                $('#dynamic-table').on('click', '.hotel-btn', function() {
                    event.preventDefault();

                    var row = $(this).closest('tr');
                    var newHotelSection = row.find('.newhotel');
                    newHotelSection.toggle();

                    if (!newHotelSection.is(':visible')) {
                        newHotelSection.find('input').val('');
                    }
                });

                $('#dynamic-table').on('click', '.add-row', function(event) {
                    event.preventDefault();
                    // Create a new row
                    var i = $('#dynamic-table tbody tr').length; // Get the current number of rows
                    var d = i + 1; // Increment day value

                    var newRow = $('<tr>');

                    // Add input fields to the row
                    newRow.append(
                        '<td>Date<input class="form-control" type="date" required name="date[' +
                        i +
                        ']"> <input type="hidden" name="day[' + i + ']" value="' + d +
                        '">      <div class="weatherdispay"></div> <br> <button class="weather btn btn-secondary">Weather</button></td>'
                    );
                    newRow.append(
                        '<td>Destination <input class="form-control pac-target-input" type="text" required name="h_place[' +
                        i +
                        ']"> <br> <button class="hotel-btn btn btn-secondary">hotel</button> <div class="newhotel"> <br> Name <input class="form-control" type="text"  name="hotel[' +
                        i +
                        ']"> <br> Contact <input class="form-control" type="text"  name="h_contact[' +
                        i +
                        ']"><br> Address <input class="form-control" type="text"  name="h_address[' +
                        i +
                        ']"><br> Price <input class="form-control" type="text"  name="h_price[' +
                        i + ']"> </div></td>'
                    );
                    newRow.append('<td><input class="form-control" type="text" name="h_note[' + i +
                        ']"></td>');
                    newRow.append(
                        '<td><button class="delete-row btn btn-danger">Delete</button> <button class="btn add-row btn-success" >Add Row</button></td></td>'
                    );


                    // Append the new row to the table body
                    $('#dynamic-table tbody').append(newRow);

                    // Initialize Autocomplete for the new row
                    initializeAutocompleteForNewRow(newRow);
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            t = 0;
            $('#add-invoice-row').click(function() {
                event.preventDefault();
                t++;

                const newRow = `
                    <tr>
                        <td><input class="form-control" type="text" required name="invoice[${t}]"></td>
                        <td><input class="form-control" type="number" required step="any" name="amount[${t}]"></td>
                        <td><button class="delete-row btn-danger btn">Delete</button></td>
                       
                    </tr>
                `;
                $('#dynamic-invoice tbody').append(newRow);
            });

            // Event delegation for dynamically added elements
            $('#dynamic-invoice').on('click', '.delete-row', function() {
                $(this).closest('tr').remove();
            });


        });
    </script>

    <script>
        $(document).ready(function() {

            var formSubmitted = false;


            $('#myForm').submit(function(event) {

                if (formSubmitted) {

                    event.preventDefault();

                } else {

                    formSubmitted = true;

                    $('#submitBtn').attr('disabled', true);
                }
            });
        });
    </script>
@endsection