@extends('company.layout.content')

@section('customTitle')
{{ __('company.car_maintenance.new_maintenance_order') }}
@endsection

@section('customStyle')
<link href='{{ asset("company/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("company/$locale/plugins/flatpickr/flatpickr.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("company/$locale/plugins/flatpickr/custom-flatpickr.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')
<div id="content" class="main-content">
    <div class="container">
        <div class="container">
            <div class="row">
                <div id="flStackForm" class="col-12 layout-spacing layout-top-spacing">
                    <div class="statbox widget box box-shadow">
                        <div class="widget-header">
                            <div class="row">
                                <div class="col-12 uroad-section">
                                    <h4>{{ __('company.car_maintenance.new_maintenance_order') }} :</h4>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content widget-content-area">
                            <form class="uroad-form" action="{{ route('company.car-maintenance.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="form-row mb-4">

                                    <div class="form-group col-md-4">
                                        <label for="from_branch">{{ __('company.car_transport.fields.current_branch') }}</label>
                                        <select id="from_branch" class="form-control basic" name="from_branch" required @if(auth()->user()->is_senior_management != true) readonly @endif>
                                            @if (auth()->user()->is_senior_management == true)
                                            @foreach ($branches as $branch)
                                            <option value="{{ $branch->id }}">
                                                {{ $branch->name }}</option>
                                            @endforeach
                                            @else
                                            <option value="{{ auth()->user()->branch_id ?? null }}" selected>
                                                {{ auth()->user()->branch->name ?? null }}
                                            </option>
                                            @endif
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car_type">{{ __('company.car_transport.fields.car_type') }}</label>
                                        <select required id="car_type" class="form-control basic" name="car_id">
                                            <option value="" selected>
                                                {{ __('company.car_transport.fields.car_type') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car">{{ __('company.car_transport.fields.car') }}</label>
                                        <select required id="car" class="form-control basic" name="car_details_id">
                                            <option value="" selected>
                                                {{ __('company.car_transport.fields.car') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="title">{{ __('company.car_maintenance.fields.title') }}</label>
                                        <input type="text" id="title" class="form-control" name="title">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="start_date">{{ __('company.car_maintenance.fields.start_date') }}</label>
                                        <input type="date" class="form-control contract-start-date basicFlatpickrStartDate flatpickr-input" id="start_date" placeholder="{{ __('company.car_maintenance.fields.start_date') }}" name="start_date" required onchange="MinDateDependsOnStartDate('end_date', this)">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="end_date">{{ __('company.car_maintenance.fields.end_date') }}</label>
                                        <input type="date" class="form-control contract-expiry-date basicFlatpickrStartDate flatpickr-input" id="end_date" placeholder="{{ __('company.car_maintenance.fields.end_date') }}" name="end_date" required>
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="details">{{ __('company.car_maintenance.fields.details') }}</label>
                                        <textarea class="form-control" id="details" rows="8" placeholder="{{ __('company.car_maintenance.fields.details') }}" name="notes" required></textarea>
                                    </div>

                                    <hr style="border-top: 1px solid #2E9BD8;">

                                    <input type="submit" class="btn btn-primary mt-3" value="{{ __('general.submit') }}">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('customScript')
<script src='{{ asset("company/$locale/plugins/flatpickr/flatpickr.js") }}'></script>
<script src='{{ asset("company/$locale/plugins/flatpickr/custom-flatpickr.js") }}'></script>

<script>
    $('#from_branch').attr('selected', function() {
            $.ajax({
                url: "{{ route('company.CarsDependsOnBranch') }}",
                type: 'GET',
                data: {
                    '_token': $('meta[name="token"]').attr('content'),
                    'branch_id': $('#from_branch').val(),
                },
                success: function(result) {
                    $('#car_type').html(result);
                },
            });
        });

    $('#from_branch').on('change', function() {
            $.ajax({
                url: "{{ route('company.CarsDependsOnBranch') }}",
                type: 'GET',
                data: {
                    '_token': $('meta[name="token"]').attr('content'),
                    'branch_id': $('#from_branch').val(),
                },
                success: function(result) {
                    $('#car_type').html(result);
                },
            });
        });
</script>


<script>
    $('#car_type').attr('selected', function() {
            $.ajax({
                url: "{{ route('company.CarDetailsDependsOnCompanyCarIDForTransport') }}",
                type: 'GET',
                data: {
                    '_token': $('meta[name="token"]').attr('content'),
                    'car_id': $('#car_type').val(),
                },
                success: function(result) {
                    $('#car').html('');
                    $.each(result.car_details, function(key, value) {
                        $('#car').append('<option value="'+ value.id +'">' + value.car.models.ar_name + ' | ' + value.plate + ' | ' + value.car.model + '</option>');
                    });
                },
            });
        });

    $('#car_type').on('change', function() {
            $.ajax({
                url: "{{ route('company.CarDetailsDependsOnCompanyCarIDForTransport') }}",
                type: 'GET',
                data: {
                    '_token': $('meta[name="token"]').attr('content'),
                    'car_id': $('#car_type').val(),
                },
                success: function(result) {
                    $('#car').html('');
                    $.each(result.car_details, function(key, value) {
                        $('#car').append('<option value="'+ value.id +'">' + value.car.car.ar_name + ' | ' + value.plate + ' | ' + value.car.model + '</option>');
                    });
                },
            });
        });
</script>




@endsection