@extends('layouts/layoutMaster')

@section('title', 'eCommerce Product Add - Apps')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/quill/typography.scss',
'resources/assets/vendor/libs/quill/katex.scss',
'resources/assets/vendor/libs/quill/editor.scss',
'resources/assets/vendor/libs/select2/select2.scss',
'resources/assets/vendor/libs/dropzone/dropzone.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/tagify/tagify.scss',
'resources/assets/vendor/libs/bs-stepper/bs-stepper.scss'
])
@endsection

@section('vendor-script')
@vite([
'resources/assets/vendor/libs/select2/select2.js',
'resources/assets/vendor/libs/tagify/tagify.js',
'resources/assets/vendor/libs/dropzone/dropzone.js',
'resources/assets/vendor/libs/jquery-repeater/jquery-repeater.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js'
])
@endsection

@section('page-script')
@vite([
'resources/assets/js/hybrid-package-add.js'
])
@endsection

@section('content')
<div class="app-ecommerce">
    <!-- Add Product -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
        <div class="d-flex flex-column justify-content-center">
            <h4 class="mb-1">Add Umrah Package</h4>
            <p class="mb-0">Fill in the details below to add a new transfer</p>
        </div>
    </div>
    <div class="row">
        <!-- First column-->
        <div class="col-12 col-lg-12">
            @include('content.hybrid.package.alerts')
            @include('content.umrah.stepper', ['currentStep' => 5,'packageId'=>$package->id])

            <form action="{{ route('umrah-package-pricing-store',$package->id) }}" method="POST" class="needs-validation" novalidate enctype="multipart/form-data">
                @csrf
                <input type="hidden" value="{{$package->id}}" name="package_id">
                <input type="hidden" value="{{$package->umrah_package_plan_id}}" name="umrah_package_plan_id">

                <div class="form-repeater">
                    <div data-repeater-list="pricing">
                        @foreach($pricings->isNotEmpty() ? $pricings : [null] as $key => $pricing)
                        <div data-repeater-item>
                            <div class="card mb-6">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Plan {{$key + 1}}: Pricing</h5>
                                </div>
                                <div class="card-body">
                                    <input type="hidden" value="{{$pricing['plan_id']}}" name="plan_id">

                                    <div class="row mb-3">
                                        <div class="col-md-3">
                                            <label class="form-label">Overall Discount (%)</label>
                                            <input type="number" name="overall_discount" class="form-control" placeholder="Enter discount" value="{{ old('overall_discount', $pricing['pricing']['overall_discount'] ?? '') }}" required>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Overall Markup (%)</label>
                                            <input type="number" name="overall_markup" class="form-control" placeholder="Enter markup" value="{{ old('overall_markup', $pricing['pricing']['overall_markup'] ?? '') }}" required>
                                        </div>
                                    </div>
                                    <hr class="mb-5 mt-5"/>

                                    <div class="row">
                                        <small class="mb-5">Per Pax Pricing</small>
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label class="form-label">SGL Price *</label>
                                                    <input type="number" name="single_room_price" class="form-control" value="{{ old('single_room_price', $pricing['pricing']['single_room_price'] ?? '') }}" required>
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label">DBL Price *</label>
                                                    <input type="number" name="double_room_price" class="form-control" value="{{ old('double_room_price', $pricing['pricing']['double_room_price'] ?? '') }}" required>
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label">TRPL Price *</label>
                                                    <input type="number" name="triple_room_price" class="form-control" value="{{ old('TRPL_rate', $pricing['pricing']['triple_room_price'] ?? '') }}" required>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label class="form-label">QUAD Price</label>
                                                    <input type="number" name="quad_room_price" class="form-control" value="{{ old('QUAD_rate', $pricing['pricing']['quad_room_price'] ?? '0') }}">
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label">1 B/R Suite Price</label>
                                                    <input type="number" name="BR_SUITE" class="form-control" value="{{ old('BR_SUITE', $pricing->BR_SUITE ?? '0') }}">
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label">2 B/R Suite Price</label>
                                                    <input type="number" name="BR_SUITE2" class="form-control" value="{{ old('BR_SUITE2', $pricing->BR_SUITE2 ?? '0') }}">
                                                </div>
                                            </div>
                                            <hr/>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label">CHD WITH BED (6-12) *</label>
                                                    <input type="number" name="child_w_bed_price" class="form-control" value="{{ old('CHD_W_BED', $pricing['pricing']['child_w_bed_price'] ?? '') }}" required>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label">CHD W/O BED (3-5) *</label>
                                                    <input type="number" name="child_wo_bed_price" class="form-control" value="{{ old('CHD_WO_BED', $pricing['pricing']['child_wo_bed_price'] ?? '') }}" required>
                                                </div>
                                            </div>
                                            <hr/>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <label class="form-label">Infant (0-2) *</label>
                                                    <input type="number" name="infant_price" class="form-control" value="{{ old('infant_price', $pricing['pricing']['infant_price'] ?? '0') }}" required>
                                                </div>
                                            </div>
                                            <hr/>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <label class="form-label">Ticket Only</label>
                                                    <input type="number" name="ticket_price" class="form-control" value="{{ old('TKT_ONLY', $pricing['pricing']['ticket_price'] ?? '0') }}">
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-check mt-5">
                                                        <input class="form-check-input" type="checkbox" id="refundable" name="refundable" {{ old('refundable', $pricing['pricing']['refundable'] ?? 0) == 1 ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="refundable">Is the Price Refundable?</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
                    <div class="d-flex flex-column justify-content-center"></div>
                    <div class="d-flex align-content-center flex-wrap gap-4">      
                        <button type="submit" class="btn btn-primary waves-effect waves-light">Submit Pricing</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection