@extends('layouts.admin')

@section('header_style')
    <link href="{{ asset('assets/plugins/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        td { 
            font-size: 14px !important; 
        }
    </style>
@endsection

@section('content')   
<form method="POST" enctype="multipart/form-data" action="{{ route('hotel_markup.update', $markup->id) }}">
    @csrf
    @method('PUT') <!-- Add the method spoofing for PUT request -->
    <div class="top-baar">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="nav nav-tabs">
                    <li>
                        <h3>Edit Hotel Markup</h3> <!-- Change the title to indicate editing -->
                    </li>
                </ul>
                <div class="Save">
                    <button type="submit" class="btn btn-success" style="float: right;padding-right: 20px;padding-left: 20px;margin-right: 10px;">SAVE</button>
                </div>
                <div class="Discard">
                    <a href="{{ route('hotel_markup.index') }}" class="btn btn-danger px-4 py-1" style="float: right;margin-right: 10px;">DISCARD</a>
                </div>
            </div>
        </nav>
    </div>

    <div class="col-sm-6 card mt-1 mx-2" style="padding-left:20px;">
        <div class="col-2 ml-8 pl-8">
            <div class="form-group row my-0 pt-5">
                <label class="col-sm-3 form-label pt-1 text-left">Hotel Provider* :</label>
                <div class="col-sm-6 mb-3 mr-5">
                    <select autocomplete="off" name="provider" id="provider" class="form-control" required="">
                        <option value="dida" {{ $markup->provider == 'dida' ? 'selected' : '' }}>Dida</option>
                        <option value="wahtung" {{ $markup->provider == 'wahtung' ? 'selected' : '' }}>WahTung</option>
                    </select>
                </div>
                <div class="mx-3">  
                </div>
            </div>
            
            <div class="form-group row my-0">
                <label class="col-sm-3 form-label pt-1 text-left">Markup (%)* :</label>
                <div class="col-sm-6 mb-3 mr-5">
                    <input autocomplete="off" type="text" step="0.01" name="markup" id="markup" class="form-control" value="{{ $markup->markup }}" required="">
                </div>
                <div class="mx-3">  
                </div>
            </div>
        </div>
        <div class="col-2 ml-8 pl-8">
            <div class="form-group row my-0 pt-5">
                <label class="col-sm-3 form-label pt-1 text-left">Markup for* :</label>
                <div class="col-sm-6 mb-3 mr-5">
                    <select autocomplete="off" name="markup_for" id="markup_for" class="form-control" required="">
                        <option value="agent" {{ $markup->markup_for == 'agent' ? 'selected' : '' }}>Agent</option>
                        <option value="retail" {{ $markup->markup_for == 'retail' ? 'selected' : '' }}>Retail</option>
                        <!-- Add more options as needed -->
                    </select>
                </div>
                <div class="mx-3">  
                </div>
            </div>            
        </div>
    </div>
</form> 
@endsection

@section('footer_script')
    <script src="{{ asset('assets/scripts/datatable.js' ) }}" type="text/javascript"></script>
    <script src="{{ asset('assets/plugins/datatables/datatables.min.js' ) }}" type="text/javascript"></script>
    <script src="{{ asset('assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js' ) }}" type="text/javascript"></script>
    <script src="{{ asset('assets/plugins/jquery-validation/js/jquery.validate.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/plugins/jquery-validation/js/additional-methods.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js' ) }}" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
    // Function to handle form submission
    $('form').submit(function(event) {
        event.preventDefault(); // Prevent the default form submission

        // Get the form data
        var formData = $(this).serialize();

        // AJAX request to insert data into the database
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'), // Form action URL
            data: formData, // Form data
            success: function(response) {
                // If insertion is successful, show a success message
                console.log('Data updated successfully:', response);
                alert('Data updated successfully!');
                
                // After successful insertion, you can redirect to another page
                window.location.href = "./";
            },
            error: function(xhr, status, error) {
                // If an error occurs during insertion, you can handle it here
                console.error('Error:', error);
                alert('An error occurred while updating data. Please try again.');
            }
        });
    }); 
});
    </script> 
@endsection