<x-app-layout>
    @section('page_css')
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/core/menu/menu-types/vertical-menu.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/core/colors/palette-gradient.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/plugins/forms/wizard.css') }}">
        <style type="text/css">
            .form-group.body_types input {
                float: left !important;
                display: block !important;
                width: 30% !important;
                margin: 0 2% 10px 0 !important;
            }
            /*.form-group.body_types input {
                float: left !important;
                display: block !important;
                width: 45% !important;
                margin: 0 2% 10px 0 !important;
            }
            input[type="checkbox"] {
                width: 2% !important;
                margin-top: 10px !important;
            }*/ 
            .form-group.body_types2 input {
                float: left !important; 
                display: block !important; 
                width: 35% !important; 
                margin: 0 2% 10px 0 !important; 
            }
        </style>
    @endsection
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">Car Wash Report</h2>
                            <div class="breadcrumb-wrapper col-12">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ $home_url }}">Home</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('owner.cor.list') }}">Car Wash Report</a>
                                    </li>
                                    <li class="breadcrumb-item active">Edit</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="content-body">
                <section id="validation">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                {{-- <div class="card-header">
                                    <h4 class="card-title">Validation Example</h4>
                                </div> --}}
                                <div class="card-content">
                                    <div class="card-body">
                                        @if ($errors->any())
                                            <div class="alert alert-danger">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif
                                        @if (Session::has('success'))
                                        <div class="alert alert-success" role="alert">
                                            {{-- <h4 class="alert-heading">Success</h4> --}}
                                            <p class="mb-0">
                                                {{ Session::get('success') }}
                                            </p>
                                        </div>
                                        @endif
                                        <form action="{{ route('owner.cor.update', array('id' => $details['id'])) }}"
                                            class="steps-validation wizard-circle" method="POST"
                                            enctype="multipart/form-data">
                                            @csrf
                                            <!-- Step 1 -->
                                            <fieldset>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group body_types">
                                                            <h5>Choose Wash Types</h5>
                                                            @if(isset($washCategories) && !empty($washCategories) && count($washCategories))
                                                                @foreach($washCategories as $c)
                                                                    @if(isset($c['body_types']) && !empty($c['body_types']) && count($c['body_types']))
                                                                        @if(in_array($c['id'], $existingWashArray))
                                                                        <input type="checkbox" name="wash_category_id[]" value="{{$c['id']}}" checked="checked">
                                                                        @else
                                                                        <input type="checkbox" name="wash_category_id[]" value="{{$c['id']}}">
                                                                        @endif
                                                                        <input type="text" class="form-control " id="wash_name" name="wash_name[]" value="{{$c['wash_name']}}" readonly>
                                                                        <input type="text" class="form-control " id="price" name="price[]" value="{{$c['body_types'][0]['price']}}" placeholder="Price" readonly>
                                                                    @endif    
                                                                @endforeach
                                                            @endif
                                                        </div>
                                                    </div>

                                                    <div class="col-md-12">
                                                        <div class="form-group body_types2">
                                                            <h5>Optional Extra</h5>
                                                            @if(isset($optionalExtra) && !empty($optionalExtra) && count($optionalExtra))
                                                                @foreach($optionalExtra as $c)
                                                                    <input type="text" class="form-control " id="optional_extra" name="optional_extra[]" value="{{$c['optional_extra']}}">
                                                                    <input type="text" class="form-control " id="optional_extra_price" name="optional_extra_price[]" value="{{$c['price']}}" placeholder="Price">
                                                                @endforeach
                                                            @endif
                                                            <input type="text" class="form-control " id="optional_extra" name="optional_extra[]" value="" placeholder="Optional extra">
                                                            <input type="text" class="form-control " id="optional_extra_price" name="optional_extra_price[]" value="" placeholder="Price">

                                                            <input type="text" class="form-control " id="optional_extra" name="optional_extra[]" value="" placeholder="Optional extra">
                                                            <input type="text" class="form-control " id="optional_extra_price" name="optional_extra_price[]" value="" placeholder="Price">

                                                            <input type="text" class="form-control " id="optional_extra" name="optional_extra[]" value="" placeholder="Optional extra">
                                                            <input type="text" class="form-control " id="optional_extra_price" name="optional_extra_price[]" value="" placeholder="Price">

                                                            <input type="text" class="form-control " id="optional_extra" name="optional_extra[]" value="" placeholder="Optional extra">
                                                            <input type="text" class="form-control " id="optional_extra_price" name="optional_extra_price[]" value="" placeholder="Price">

                                                            <input type="text" class="form-control " id="optional_extra" name="optional_extra[]" value="" placeholder="Optional extra">
                                                            <input type="text" class="form-control " id="optional_extra_price" name="optional_extra_price[]" value="" placeholder="Price">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-12">
                                                        <h5>Driver Details</h5>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="name">
                                                                Driver Name
                                                            </label>
                                                            <input type="text" class="form-control " id="driver_name" name="driver_name" value="@if(isset($details)){{ $details['driver_name'] }}@endif">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="name">
                                                                Driver Email
                                                            </label>
                                                            <input type="text" class="form-control " id="driver_email" name="driver_email" value="@if(isset($details)){{ $details['driver_email'] }}@endif">
                                                        </div>
                                                    </div>

                                                    <!-- <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="name">
                                                                Driver ISD Code
                                                            </label>
                                                            <input type="text" class="form-control " id="driver_isd_code" name="driver_isd_code" value="@if(isset($details)){{ $details['driver_isd_code'] }}@endif">
                                                        </div>
                                                    </div> -->

                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="name">
                                                                Driver Phone
                                                            </label>
                                                            <input type="text" class="form-control " id="driver_phone" name="driver_phone" value="@if(isset($details)){{ $details['driver_phone'] }}@endif">
                                                            <input type="hidden" name="driver_isd_code" id="driver_isd_code"driver_isd_code
                                                                value="{{ $details['driver_isd_code'] }}" />
                                                        </div>
                                                    </div>

                                                    <div class="col-md-12">
                                                        <h5>Car Details</h5>
                                                    </div>
                                                    <input type="hidden" name="car_id" value="@if(isset($carDetails)){{ $carDetails['id'] }}@endif">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="name">
                                                                Car Registration No
                                                            </label>
                                                            <input type="text" class="form-control " id="car_registration_no" name="car_registration_no" value="@if(isset($carDetails)){{ $carDetails['car_registration_no'] }}@endif">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="name">
                                                                Car Model
                                                            </label>
                                                            <input type="text" class="form-control " id="make" name="make" value="@if(isset($carDetails)){{ $carDetails['make'] }}@endif">
                                                        </div>
                                                    </div>

                                                    @if($details['payment_status'] == 0)
                                                    <div class="col-md-12">
                                                        <h5>Payment Status</h5>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <!-- <label for="name">
                                                                Paid
                                                            </label> -->
                                                            <input type="checkbox" class="" id="payment_status" name="payment_status" value="1"> Paid
                                                        </div>
                                                    </div>
                                                    @endif

                                                    <div class="col-md-6 offset-md-4">
                                                        <button type="submit" class="btn btn-primary mr-1 mb-1">Save</button>
                                                        <a class="btn btn-outline-warning mr-1 mb-1" href="{{ route('owner.cor.list') }}">Back</a>
                                                    </div>
                                                </div>
                                            </fieldset>



                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

            </div>
        </div>
    </div>
    @section('page_scripts')
        <script src="{{ asset('app-assets/vendors/js/extensions/jquery.steps.min.js') }}"></script>
        <script src="{{ asset('app-assets/vendors/js/forms/validation/jquery.validate.min.js') }}"></script>
        <script src="{{ asset('app-assets/js/scripts/forms/wizard-steps.js') }}"></script>
        <script>
            $(document).ready(function() {
                $("#logo-upload").on('change', function() {
                    //Get count of selected files
                    var countFiles = $(this)[0].files.length;
                    var imgPath = $(this)[0].value;
                    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
                    var image_holder = $(".logo-box");
                    image_holder.empty();
                    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                        if (typeof(FileReader) != "undefined") {
                            //loop for each file selected for uploaded.
                            for (var i = 0; i < countFiles; i++) {
                                var reader = new FileReader();
                                reader.onload = function(e) {
                                    $("<img />", {
                                        "src": e.target.result,
                                        "class": "thumb-image"
                                    }).appendTo(image_holder);
                                }
                                image_holder.show();
                                reader.readAsDataURL($(this)[0].files[i]);
                            }
                        } else {
                            alert("This browser does not support FileReader.");
                        }
                    } else {
                        alert("Pls select only images");
                    }
                });
                $(".banner-img").on('change', function() {
                    //Get count of selected files
                    var countFiles = $(this)[0].files.length;
                    var imgPath = $(this)[0].value;
                    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
                    var image_holder = $(this).parents('.img-box-wrapper').find(".banner-box");
                    image_holder.empty();
                    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                        if (typeof(FileReader) != "undefined") {
                            //loop for each file selected for uploaded.
                            for (var i = 0; i < countFiles; i++) {
                                var reader = new FileReader();
                                reader.onload = function(e) {
                                    $("<img />", {
                                        "src": e.target.result,
                                        "class": "thumb-image"
                                    }).appendTo(image_holder);
                                }
                                image_holder.show();
                                reader.readAsDataURL($(this)[0].files[i]);
                            }
                        } else {
                            alert("This browser does not support FileReader.");
                        }
                    } else {
                        alert("Pls select only images");
                    }
                });
            });
        </script>
        <script>
            $(document).ready(function() {

                var input = document.querySelector("#driver_phone");
                var savedISDCode = $('#driver_isd_code').val();
                var initialCountry = savedISDCode ? null : "za";

                var iti = window.intlTelInput(input, ({
                    separateDialCode: true,
                    preferredCountries: ["za"],
                    initialCountry: "za",

                }));
                if (savedISDCode) {
                    var allCountries = window.intlTelInputGlobals.getCountryData();
                    for (var i = 0; i < allCountries.length; i++) {
                        if (allCountries[i].dialCode == savedISDCode.replace('+', '')) { // Remove + for comparison
                            iti.setCountry(allCountries[i].iso2);
                            break;
                        }
                    }
                }
                $('.steps-validation').on('submit', function(e) {
                    // Get country data
                    var countryData = iti.getSelectedCountryData();
                    var isdCode = countryData.dialCode; // e.g., '+1'

                    $('#driver_isd_code').val(isdCode);

                });
            });
        </script>        
    @endsection
</x-app-layout>
