@extends('front.layouts.main')
@section('content')
    @inject('settings','App\Models\Setting')
    <div class="breadCrumb position-relative main-bk mt-lg-4 pt-lg-5">
        <div class="trans-balck">
            <div class="container mt-lg-5">
                <h1 class=" text-white text-center font-weight-bold  pt-5 mt-5 mb-lg-4">@lang('front.service')</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb pb-lg-5">
                        <li class="breadcrumb-item  sec-color"><a href="{{url('/')}}">@lang('front.home')</a></li>
                        <li class="breadcrumb-item  sec-color"><a>@lang('front.service')</a></li>
                        <li class="breadcrumb-item active text-white" aria-current="page">{{$service->$title}}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <div class="bg-light">
        <div class="markter py-5">
            <h2 class="text-center font-weight-bold main-color  h1 mb-4">{{$service->$title}})</h2>
            <div class="container">
                <p class="lead main-color text-center">  {{$service->$brief}} </p>
                <div class="row mt-5">
                    @foreach($service->photos as $photo)
                        <div class="mb-3 ">
                            <img src="{{asset(optional($photo)->path)}}" alt="" class="w-100">
                        </div>
                    @endforeach
                </div>
                <div class="row mt-4">
                    <div class="col-lg-6">
                        <p class="lead main-color styling "> {!! $service->$desc !!} </p>
                    </div>
                </div>
                <div class="text-center mt-5">
                    <button class="btn text-white effect010  py-2 bttons" data-toggle="modal"
                            data-target="#mymodal-{{$service->id}}">
                        @lang('front.ask_service')
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade modeling" id="mymodal-{{$service->id}}" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" style="margin-top: 50px;">
            <div class="modal-content">
                <div class="close-btn pointer text-center sec-bk" data-dismiss="modal" aria-label="Close" style="">
                    <i class="fa fa-times text-white" style="font-size: 23px;margin-top: 13px;"></i>

                </div>
                <h4 class="main-color text-center text-capitalize pt-5 font-weight-bold">@lang('front.ask_service')</h4>
                <div class="modal-body">
                    <form class="px-lg-5 px-2" method="post" action="{{route('order-create')}}" id="addService"
                          enctype="multipart/form-data">
                        @csrf

                        <div class="form-group mt-4 pt-2">
                            <input type="text" class="form-control" placeholder="@lang('front.name')" name="name">
                            <label id="service_name" class="error_sms"></label>
                        </div>
                        <div class="form-group mt-4 pt-2">
                            <input type="number" class="form-control" placeholder="@lang('front.phone')" name="phone">
                            <label id="service_phone" class="error_sms"></label>
                        </div>
                        <div class="form-group mt-4 pt-2">
                            <input type="email" class="form-control" placeholder="@lang('front.email')" name="email">
                            <label id="service_email" class="error_sms"></label>

                        </div>
                        <div class="form-group mt-4 pt-2">
                            {{--                            <select  class="form-control">--}}
                            {{--                                <option >Digital Marketing</option>--}}
                            {{--                                <option >الجيزة</option>--}}
                            {{--                            </select>--}}
                            <input type="hidden" name="service_id" value="{{$service->id}}">
                            <input type="text" class="form-control" value="{{$service->$title}}" disabled>
                        </div>
                        <div class="form-group mt-4 pt-2">
                            <input type="text" class="form-control" placeholder="Product ID(CM0{{$service->id}})"
                                   value="Product ID(CM0{{$service->id}})" disabled>
                        </div>
                        <div class="form-group mt-4 pt-2">
                            <input type="text" class="form-control" placeholder="@lang('front.company_name')"
                                   name="company_name">
                            <label id="service_company_name" class="error_sms"></label>
                        </div>
                        <div class="form-group mt-4 pt-2">
                            <input type="text" class="form-control" placeholder="@lang('front.company_domain')"
                                   name="company_domain">
                            <label id="service_company_domain" class="error_sms"></label>
                        </div>
                        <div class="form-group mt-4 pt-2">
                            <input type="file" class="form-control" name="path">
                            <label id="service_path" class="error_sms"></label>
                        </div>
                        <h6 class="mt-5 mb-5 text-center">
                            <button type="submit" class="btn text-white effect010  py-2 bttons px-lg-5"
                                    id="service_button">
                                @lang('front.send')
                            </button>
                        </h6>
                    </form>
                    >
                </div>

            </div>
        </div>
    </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            var inputs =
                [
                    'name',
                    'email',
                    'phone',
                    'company_name',
                    'company_domain',
                    'path',
                ];
            $('#service_button').click(function (e) {
                e.preventDefault();
                var url = $('#addService').attr('action');
                var form_data = $('#addService').get(0);
                $('.error_sms').hide();
                $('#service_button').attr('disabled', 'disabled');
                $('#service_button').text('').append('<span class="spinner-border spinner-border-lg" role="status" aria-hidden="true"></span>');
                for (var i = 0; i < inputs.length; i++) {
                    $('#input_' + inputs[i] + '').css('border', '');
                }
                $.ajax({
                    url: url,
                    type: 'post',
                    data: new FormData(form_data),
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        var url = data.url;
                        if (url) {
                            window.location = url;
                        }
                    },
                    error: function (data) {
                        var error = data.responseJSON.errors;
                        $('#service_button').removeAttr('disabled');
                        $('#service_button').text('').append('{{trans('front.send')}}');
                        for (var i = 0; i < inputs.length; i++) {
                            if (error.hasOwnProperty(inputs[i])) {
                                $('#service_' + inputs[i] + '').text('').append('<i class="error_fontawai fas fa-exclamation-circle" style="padding-left: 4px;color: red"></i>' + error[inputs[i]] + '');
                                $('#service_' + inputs[i] + '').show();
                                $('#input_' + inputs[i] + '').css('border', '1px solid red').css('margin-bottom', 0);
                            }
                        }
                    }
                });
            });
        });
    </script>
@endpush