@extends('client/layouts/contentNavbarLayout')

@section('title')
{{ __('client.vehicle_details') }}
@endsection


@section('page-script')

@endsection

@section('content')

<h1 class="fw-bold h4">{{ __('client.vehicle_details') }}</h1>

@include('client.responses.messages')

<div class="card my-4">
    <div class="card-header">
        <h3 class="h5 text-color">{{ __('client.general_informations') }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('client.vehicle.update', $vehicle->id) }}" method="POST">
            @csrf
            <div class="row">
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="mark" class="form-label">{{ __('client.mark') }}</label>
                        <input type="text" class="form-control" id="mark" name="mark" value="{{ $vehicle->mark }}" readonly>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="model" class="form-label">{{ __('client.model') }}</label>
                        <input type="text" class="form-control" id="model" name="model" value="{{ $vehicle->model }}" readonly>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="version" class="form-label">{{ __('client.version') }}</label>
                        <input type="text" class="form-control" id="version" name="version" value="{{ $vehicle->version }}" readonly>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="engine_type" class="form-label">{{ __('client.engine_type') }}</label>
                        <input type="text" class="form-control" id="engine_type" name="engine_type" value="{{ $vehicle->motor_type }}" readonly>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="horse_power" class="form-label">{{ __('client.horse_power') }}</label>
                        <input type="text" class="form-control" id="horse_power" name="horse_power" value="{{ $vehicle->horse_power }}" @if($vehicle->search_method === Vehicle::STANDARD_SEARCH_METHOD) readonly @else required @endif>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <label for="gearbox" class="form-label">{{ __('client.gearbox') }}</label>
                    <select class="form-select" id="gearbox" name="gearbox" required>
                        <option value="">Sélectionner</option>
                        <option value="A" @if($vehicle->gearbox === Vehicle::GEARBOX_AUTO) selected @endif>Automatique</option>
                        <option value="M" @if($vehicle->gearbox !== Vehicle::GEARBOX_AUTO) selected @endif>Manuel</option>
                    </select>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="numberplate" class="form-label">{{ __('client.numberplate') }}</label>
                        <input type="text" class="form-control" id="numberplate" name="numberplate" value="{{ $vehicle->numberplate }}" @if($vehicle->search_method === Vehicle::MATRICULATION_SEARCH_METHOD) readonly @else required @endif>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="serial_number" class="form-label">{{ __('client.serial_number') }}</label>
                        <input type="text" class="form-control" id="serial_number" name="serial_number" value="{{ $vehicle->serial_number }}">
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="park_number" class="form-label">{{ __('client.park_number') }}</label>
                        <input type="text" class="form-control" id="park_number" name="park_number" value="{{ $vehicle->park_number }}">
                    </div>
                </div>
            </div>
            <div class="col text-center mt-3">
                <button type="submit" class="btn btn-primary">{{ __('client.save') }}</button>
            </div>
        </form>
    </div>
</div>
<div class="card my-4">
    <div class="card-header">
        <h3 class="h5 text-color">{{ __('client.vehicle_maintenance_information') }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('client.vehicle.maintenance-information.update', $vehicle->id) }}" method="POST">
            @csrf
            <div class="row mb-3">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="technical_inspection_date">{{ __('client.technical_inspection_date') }}</label>
                        <input type="date" class="form-control" id="technical_inspection_date" name="technical_inspection_date" value="{{ $vehicle->technical_inspection_date }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="next_technical_inspection_date">{{ __('client.next_technical_inspection_date') }}</label>
                        <input type="date" class="form-control" id="next_technical_inspection_date" name="next_technical_inspection_date" value="{{ $vehicle->next_technical_inspection_date }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="construction_year">{{ __('client.construction_year') }}</label>
                        <input type="date" class="form-control" id="construction_year" name="construction_year" value="{{ $vehicle->construction_year }}" @if($vehicle->search_method === Vehicle::MATRICULATION_SEARCH_METHOD) readonly @else required @endif>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="revision_date">{{ __('client.revision_date') }}</label>
                        <input type="date" class="form-control" id="revision_date" name="revision_date" value="{{ $vehicle->revision_date }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="next_revision_date">{{ __('client.next_revision_date') }}</label>
                        <input type="date" class="form-control" id="next_revision_date" name="next_revision_date" value="{{ $vehicle->next_revision_date }}">
                    </div>
                </div>
            </div>
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="mileage_at_last_revision_date">{{ __('client.mileage_at_last_revision_date') }}</label>
                        <input type="number" class="form-control" id="mileage_at_last_revision_date" name="mileage_at_last_revision_date" value="{{ $vehicle->mileage_at_last_revision_date }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="mileage_at_next_revision_date">{{ __('client.mileage_at_next_revision_date') }}</label>
                        <input type="number" class="form-control" id="mileage_at_next_revision_date" name="mileage_at_next_revision_date" value="{{ $vehicle->mileage_at_next_revision_date }}">
                    </div>
                </div>
            </div>
            <div class="col text-center">
                <button type="submit" class="btn btn-primary">{{ __('client.save') }}</button>
            </div>
        </form>
    </div>
</div>
<div class="card my-4">
    <div class="card-header">
        <h3 class="h5 text-color">{{ __('client.site') }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('client.vehicle.site.update', $vehicle->id) }}" method="POST">
            @csrf
            <div class="col mb-4">
                <select class="form-select" id="sites" name="site_id" required>
                    <option value="">{{ __('client.select') }}</option>
                    @foreach ($sites as $site)
                    <option value="{{ $site->id }}" @if($vehicle->site_id === $site->id) selected @endif>{{ $site->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col text-center">
                <button type="submit" class="btn btn-primary">{{ __('client.save') }}</button>
            </div>
        </form>
    </div>
</div>
<div class="card my-4">
    <div class="card-header">
        <h3 class="h5 text-color">{{ __('client.gray_card') }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('client.vehicle.gray-card.update', $vehicle->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row mb-4">
                <div class="col-md-6">
                    <h5>Le recto de la carte grise</h5>
                    @if ($vehicle->gray_card_front)
                        <img src="{{ asset($vehicle->gray_card_front) }}" alt="Vehicle front gray card">
                        <a href="{{ asset($vehicle->gray_card_front) }}" class="btn btn-primary mt-2" target="_blank">Consulter</a>
                    @else
                        <p>Vous n'avez pas encore ajouté le recto de la carte grise</p>   
                    @endif
                </div>
                <div class="col-md-6">
                    <h5>Le verso de la carte grise</h5>
                    @if ($vehicle->gray_card_back)
                        <img src="{{ asset($vehicle->gray_card_back) }}" alt="Vehicle back gray card">
                    @else
                        <p>Vous n'avez pas encore ajouté le verso de la carte grise</p>  
                    @endif
                </div>
            </div>
            <div class="row mb-5">
                <div class="col-md-6">
                    <input data-show-upload="false" id="gray-card-front" name="gray_card_front" type="file" accept="image">
                </div>
                <div class="col-md-6">
                    <input data-show-upload="false" id="gray-card-back" name="gray_card_back" type="file" accept="image">
                </div>
            </div>
            <div class="col text-center">
                <button type="submit" class="btn btn-primary">{{ __('client.save') }}</button>
            </div>
        </form>
    </div>
</div>
<div class="card my-4">
    <div class="card-header">
        <h3 class="h5 text-color">{{ __('client.green_card') }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('client.vehicle.green-card.update', $vehicle->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row mb-4">
                <div class="col-md-6">
                    <h5>Le recto de la carte verte</h5>
                    @if ($vehicle->green_card_front)
                        <img src="{{ asset($vehicle->green_card_front) }}" alt="Vehicle front green card">
                    @else
                        <p>Vous n'avez pas encore ajouté le recto de la carte verte</p>    
                    @endif
                </div>
                <div class="col-md-6">
                    <h5>Le verso de la carte verte</h5>
                    @if ($vehicle->green_card_back)
                        <img src="{{ asset($vehicle->green_card_back) }}" alt="Vehicle back green card">
                    @else
                        <p>Vous n'avez pas encore ajouté le verso de la carte verte</p>   
                    @endif
                </div>
            </div>
            <div class="row mb-5">
                <div class="col-md-6">
                    <input data-show-upload="false" id="green-card-front" name="green_card_front" type="file" accept="image">
                </div>
                <div class="col-md-6">
                    <input data-show-upload="false" id="green-card-back" name="green_card_back" type="file" accept="image">
                </div>
            </div>
            <div class="col text-center">
                <button type="submit" class="btn btn-primary">{{ __('client.save') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {

        $("#gray-card-front").fileinput({
            language: 'fr',
            theme: "bs5",
            uploadUrl: "#",
            maxFileSize: 2000,
            allowedFileExtensions: ['jpg', 'png', 'jpeg'],
            removeFromPreviewOnError: true,
            showDrag: true,
            dropZoneTitle: 'Drop le recto de la carte grise ici',
            browseLabel: 'Parcourir',
            cancelLabel: 'Annuler',
            removeLabel: 'Supprimer',
            maxFileCount: 1,
            fileActionSettings: {
                showRotate: false,
                showZoom: false,
                showUpload: false
            }
        });

        $("#gray-card-back").fileinput({
            language: 'fr',
            theme: "bs5",
            uploadUrl: "#",
            maxFileSize: 2000,
            allowedFileExtensions: ['jpg', 'png', 'jpeg'],
            removeFromPreviewOnError: true,
            showDrag: true,
            dropZoneTitle: 'Drop le verso de la carte grise ici',
            browseLabel: 'Parcourir',
            cancelLabel: 'Annuler',
            removeLabel: 'Supprimer',
            maxFileCount: 1,
            fileActionSettings: {
                showRotate: false,
                showZoom: false,
                showUpload: false
            }
        });

        $("#green-card-front").fileinput({
            language: 'fr',
            theme: "bs5",
            uploadUrl: "#",
            maxFileSize: 2000,
            allowedFileExtensions: ['jpg', 'png', 'jpeg'],
            removeFromPreviewOnError: true,
            showDrag: true,
            dropZoneTitle: 'Drop le recto de la carte verte ici',
            browseLabel: 'Parcourir',
            cancelLabel: 'Annuler',
            removeLabel: 'Supprimer',
            maxFileCount: 1,
            fileActionSettings: {
                showRotate: false,
                showZoom: false,
                showUpload: false
            }
        });

        $("#green-card-back").fileinput({
            language: 'fr',
            theme: "bs5",
            uploadUrl: "#",
            maxFileSize: 2000,
            allowedFileExtensions: ['jpg', 'png', 'jpeg'],
            removeFromPreviewOnError: true,
            showDrag: true,
            dropZoneTitle: 'Drop le verso de la carte verte ici',
            browseLabel: 'Parcourir',
            cancelLabel: 'Annuler',
            removeLabel: 'Supprimer',
            maxFileCount: 1,
            fileActionSettings: {
                showRotate: false,
                showZoom: false,
                showUpload: false
            }
        });
    });

</script>
@endsection