@extends('layouts.admin')
@section('content')

<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">Cost Breakdown</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 active">Cost Breakdown</li>
                </ol>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <h5 class="card-title mb-0">Cost Breakdown List</h5>
            </div>
            <div class="card-header border-0">
                <div class="row align-items-center gy-3">
                    <div class="col-sm">
                        <h5 class="card-title mb-0">Cost Breakdown</h5>
                    </div>
                    <div class="col-sm-auto d-none">
                        <a href="{{ route('admin.cost-breakdown.create', ['id'=>$journey_id]) }}" class="btn btn-success">
                            <i class="ri-add-line align-bottom me-1"></i> Add Cost Breakdown
                        </a>
                    </div>
                    <!-- Add this button above your cost breakdown table -->
                    <div class="col-sm-auto">
                        <button type="button" class="btn btn-primary" id="openEstimateCostModal">
                            <i class="ri-calculator-line align-bottom me-1"></i> Estimate Cost Per Person
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @if($estimatedCost)
                    <div class="alert alert-info">
                        <strong>Estimated Cost Per Person:</strong> AED {{ $estimatedCost->price_range }}
                    </div>
                @else
                    <div class="alert alert-warning">
                        Estimated cost per person has not been set yet.
                    </div>
                @endif
                <div class="table-responsive">
                    <table id="CostBreakdownTable1" class="table table-bordered nowrap align-middle d-none">
                        <thead>
                            <tr class="text-uppercase">
                                <th>Sl No</th>
                                <th>Item</th>
                                <th>Price</th>
                             
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($costBreakdowns as $key => $cost)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $cost->item }}</td>
                                <td>AED {{ $cost->price }}</td>
                               
                                <!-- <td>{{ $cost->created_at }}</td> -->
                                <!-- <td> -->
                                    <!-- <a href="{{ route('admin.cost-breakdown.edit', $cost->id) }}" class="btn btn-primary btn-sm">View</a> -->
                                    <!-- <a href="{{ route('admin.cost-breakdown.destroy', $cost->id) }}" class="btn btn-danger btn-sm delete-btn">Delete</a> -->
                                <!-- </td> -->
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <table id="CostBreakdownTable" class="table table-bordered nowrap align-middle">
                    <thead>
                        <tr class="text-uppercase">
                            <th>Sl No</th>
                            <th>Item</th>
                            <!-- <th>Price</th> -->
                            <!-- <th>Sub-Items</th>  -->
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($costBreakdowns as $key => $cost)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>@if($cost->items->isNotEmpty())
                                        @php
                                            // Get the first item that is a main item (parent_id is null)
                                            $mainItem = $cost->items->firstWhere('parent_id', null);
                                            $subItems = $cost->items->where('parent_id', '!=', null);
                                        @endphp

                                        @if($mainItem)
                                            <strong>{{ $mainItem->item }}</strong>: AED {{ $mainItem->price }}
                                        @else
                                            No main item found.
                                        @endif
                                    @else
                                        No items available.
                                    @endif
                                    @if($subItems->isNotEmpty())
                                       
                                      <!-- <h6 class="mt-2">Sub Items:</h6> -->
                                        <ul>
                                            @foreach($subItems as $item)
                                                <!-- Check if the item is a sub-item (parent_id is not null) -->
                                                @if($item->parent_id !== null)
                                                    <li>
                                                        {{ $item->item }}: AED {{ $item->price }}
                                                        <!-- Check if the sub-item has its own sub-items -->
                                                        @if($item->subItems->isNotEmpty())
                                                            <ul>
                                                                @foreach($item->subItems as $subItem)
                                                                    <li>{{ $subItem->item }}: AED {{ $subItem->price }}</li>
                                                                @endforeach
                                                            </ul>
                                                        @endif
                                                    </li>
                                                @endif
                                            @endforeach
                                        </ul>
                                    @else
                                       
                                    @endif
                                </td>
                                <!-- <td>AED {{ $cost->price }}</td> -->
                               
                                <td>
                                    <div class="dropdown">
                                        <a href="#" class="btn btn-soft-secondary btn-sm" role="button" id="dropdownMenuLink5" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-2-fill"></i>
                                        </a>
                                       
                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                                            
                                            <li><a class="dropdown-item" href="{{ route('admin.cost-breakdown.edit', $cost->id) }}">Edit</a></li> 
                                            <li><a class="dropdown-item delete-btn" href="#"  data-id="{{ $cost->id }}" data-url="{{ route('admin.cost-breakdown.destroy', ['id' => $cost->id]) }}" >Delete</a></li>
                                            
                                            
                                            
                                        </ul>
                                       
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>

                    </table>

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

<!-- Modal -->
<div class="modal fade" id="estimateCostModal" tabindex="-1" role="dialog" aria-labelledby="estimateCostModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="estimateCostModalLabel">Estimated Cost Per Person</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="estimateCostForm">
                    <div class="form-group">
                        <label for="price_range">Price Range (e.g., 100 - 300)</label>
                        <input type="text" class="form-control" id="price_range" name="price_range" required placeholder="e.g., 100 - 300" value="{{ $estimatedCost->price_range?? '' }}">
                    </div>
                    <input type="hidden" id="journey_id" name="journey_id" value="{{ $journey_id }}">
                    <button type="submit" class="btn btn-success">Save Estimated Cost</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
    $(document).ready(function() {
        $('#CostBreakdownTable').DataTable();
        $('#openEstimateCostModal').on('click', function() {
            $('#estimateCostModal').modal('show');
        });

        // Form validation
        $('#estimateCostForm').on('submit', function(e) {
            e.preventDefault();

            var priceRange = $('#price_range').val();
            var journeyId = $('#journey_id').val();

            // Ajax request to save the estimated cost
            $.ajax({
                url: "{{ route('admin.save.estimated.cost') }}",
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    journey_id: journeyId,
                    price_range: priceRange
                },
                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.cost-breakdown', '') }}/" + response.journey_id;
                    });
                    $('#estimateCostModal').modal('hide');
                },
                error: function(error) {
                    alert('Error saving estimated cost.');
                }
            });
        });
    });
</script>
@endsection