@props([
"financialData" => null
])

<x-modal class="browse_client" :isShow="1" width="xl">
    <div class="statbox widget box box-shadow">
        <div class="widget-content widget-content-area rounded-pills-icon">

            <div class="col-12 alert alert-light-primary text-center border-0 mb-4">
                المالية                                        
            </div>

            <div class="row justify-content-space layout-top-spacing">
                <div class="col-md-4 mb-3">
                    <div class="p-2 d-flex flex-row rounded" style="background-color: #f1f2f3;">
                        <div class="h-100 d-flex flex-column align-self-center m-2">
                            <div class="rounded-circle p-2" style="background-color: rgb(220 207 247 / 55%)">
                                <i class="las la-user" style="color: #805dca;font-size: 25px"></i>
                            </div>
                        </div>

                        <div class="d-flex flex-column text-center h-100 w-100">
                            <p class="text-secondary">
                                <b>@lang('validation.attributes.number_of_days')</b>
                            </p>
                            <p>{{ $financialData['numberOfDays'] }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="p-2 d-flex flex-row rounded" style="background-color: #f1f2f3;">
                        <div class="h-100 d-flex flex-column align-self-center m-2">
                            <div class="rounded-circle p-2" style="background-color: rgb(186, 231, 255);">
                                <i class="las la-user" style="color: #2196f3;font-size: 25px"></i>
                            </div>
                        </div>

                        <div class="d-flex flex-column text-center h-100 w-100">
                            <p class="text-info">
                                <b>@lang('validation.attributes.single_day_price')</b>
                            </p>
                            <p>{{ $financialData['singleDayPrice'] }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="p-2 d-flex flex-row rounded" style="background-color: #f1f2f3;">
                        <div class="h-100 d-flex flex-column align-self-center m-2">
                            <div class="rounded-circle p-2" style="background-color: rgb(199 230 228 / 62%);">
                                <i class="las la-copyright" style="color: #009688;font-size: 25px"></i>
                            </div>
                        </div>

                        <div class="d-flex flex-column text-center h-100 w-100">
                            <p class="text-success">
                                <b>{{ __('reservation.all_days_price') }}</b>
                            </p>
                            <p>{{ $financialData['allDaysPrice'] }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="p-2 d-flex flex-row rounded" style="background-color: #f1f2f3;">
                        <div class="h-100 d-flex flex-column align-self-center m-2">
                            <div class="rounded-circle p-2" style="background-color: rgb(220 207 247 / 55%)">
                                <i class="las la-code-branch" style="color: #805dca;font-size: 25px"></i>
                            </div>
                        </div>

                        <div class="d-flex flex-column text-center h-100 w-100">
                            <p class="text-secondary">
                                <b>{{ __('reservation.insurance_single_day_price') }}</b>
                            </p>
                            <p>{{ $financialData['insuranceSingleDayPrice'] }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="p-2 d-flex flex-row rounded" style="background-color: #f1f2f3;">
                        <div class="h-100 d-flex flex-column align-self-center m-2">
                            <div class="rounded-circle p-2" style="background-color: rgb(186, 231, 255);">
                                <i class="las la-user" style="color: #2196f3;font-size: 25px"></i>
                            </div>
                        </div>

                        <div class="d-flex flex-column text-center h-100 w-100">
                            <p class="text-info">
                                <b>@lang('validation.attributes.insurance_all_days_price')</b>
                            </p>
                            <p>{{ $financialData['insuranceAllDaysPrice'] }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="p-2 d-flex flex-row rounded" style="background-color: #f1f2f3;">
                        <div class="h-100 d-flex flex-column align-self-center m-2">
                            <div class="rounded-circle p-2" style="background-color: rgb(199 230 228 / 62%);">
                                <i class="las la-copyright" style="color: #009688;font-size: 25px"></i>
                            </div>
                        </div>

                        <div class="d-flex flex-column text-center h-100 w-100">
                            <p class="text-success">
                                <b>{{ __('reservation.total_services_price') }}</b>
                            </p>
                            <p>{{ $financialData['totalServicesPrice'] }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="p-2 d-flex flex-row rounded" style="background-color: #f1f2f3;">
                        <div class="h-100 d-flex flex-column align-self-center m-2">
                            <div class="rounded-circle p-2" style="background-color: rgb(220 207 247 / 55%)">
                                <i class="las la-code-branch" style="color: #805dca;font-size: 25px"></i>
                            </div>
                        </div>

                        <div class="d-flex flex-column text-center h-100 w-100">
                            <p class="text-secondary">
                                <b>{{ __('reservation.total_price_without_tax') }}</b>
                            </p>
                            <p>{{ $financialData['totalAmountNoTax'] }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="p-2 d-flex flex-row rounded" style="background-color: #f1f2f3;">
                        <div class="h-100 d-flex flex-column align-self-center m-2">
                            <div class="rounded-circle p-2" style="background-color: rgb(186, 231, 255);">
                                <i class="las la-user" style="color: #2196f3;font-size: 25px"></i>
                            </div>
                        </div>

                        <div class="d-flex flex-column text-center h-100 w-100">
                            <p class="text-info">
                                <b>@lang('validation.attributes.total_taxes')</b>
                            </p>
                            <p>{{ $financialData['totalTaxes'] }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="p-2 d-flex flex-row rounded" style="background-color: #f1f2f3;">
                        <div class="h-100 d-flex flex-column align-self-center m-2">
                            <div class="rounded-circle p-2" style="background-color: rgb(199 230 228 / 62%);">
                                <i class="las la-copyright" style="color: #009688;font-size: 25px"></i>
                            </div>
                        </div>

                        <div class="d-flex flex-column text-center h-100 w-100">
                            <p class="text-success">
                                <b>{{ __('reservation.total_price_with_tax') }}</b>
                            </p>
                            <p>{{ $financialData['totalAmountWithTax'] }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="paid_amount">{{ __('validation.attributes.down_payment') }}</label>
                    <input type="number" class="form-control" id="paid_amount" placeholder="{{ __('validation.attributes.down_payment') }}" name="paid_amount" value="{{ $reservation->paid_amount ?? null }}" required>
                </div>

                <div class="form-group col-md-6">
                    <label for="payment_method">{{ __('validation.attributes.payment_method') }}</label>
                    <select id="payment_method" class="form-control basic" name="down_payment_method" required>
                        @if (isset($contract->down_payment_method))
                        <option value="{{ $contract->down_payment_method ?? null }}" selected>
                            {{ __("company.Contracts.fields.$contract->down_payment_method") }}
                        </option>
                        @else
                        <option value="" selected>
                            {{ __('validation.attributes.payment_method') }}</option>
                        @endif
                        <option value="cash">{{ __('company.Contracts.fields.Cash') }}
                        </option>
                        <option value="network">{{ __('company.Contracts.fields.Network') }}
                        </option>
                        <option value="check">{{ __('company.Contracts.fields.Check') }}
                        </option>
                    </select>
                </div>

                <div class="form-group col-md-6 check_number_container d-none">
                    <label for="check_number">{{ __('validation.attributes.check_number') }}</label>
                    <input type="number" class="form-control" id="check_number" placeholder="{{ __('validation.attributes.check_number') }}" name="check_number">
                </div>
            </div>

            <input type="submit" class="btn btn-light-primary mt-3" value="{{ __('company.Contracts.fields.Next Step') }}">

        </div>
    </div>
</x-modal>