var nom = "vo";
var titre = "Nos occasions";
var titre_icone = "Occasions";
var icone = "car";

var couleur_info = "#E45900";

//#######################################################################################
//### Formulaire de recherche VO
//#######################################################################################
Ext.ns('DynamicForms');
DynamicForms.MyForm = Ext.extend(Ext.form.FormPanel, {
    initComponent: function(){
        Ext.apply(this, {
            floating: true,
            width: '100%',
            height: '100%',
            centered: true,
            modal: true,
            hideOnMaskTap: false,
            url: 'ajax.php',
            items: [{
                xtype: 'selectfield',
                name: 'marque',
                options: [{
                    text: '--- Marque ---', value: ''
                },
                 { text: 'AUDI', value: 'AUDI' }, { text: 'BMW', value: 'BMW' }, { text: 'CITROEN', value: 'CITROEN' }, { text: 'DS', value: 'DS' }, { text: 'FORD', value: 'FORD' }, { text: 'JEEP', value: 'JEEP' }, { text: 'LAND ROVER', value: 'LAND ROVER' }, { text: 'MASERATI', value: 'MASERATI' }, { text: 'MERCEDES', value: 'MERCEDES' }, { text: 'MINI', value: 'MINI' }, { text: 'NISSAN', value: 'NISSAN' }, { text: 'OPEL', value: 'OPEL' }, { text: 'PEUGEOT', value: 'PEUGEOT' }, { text: 'RENAULT', value: 'RENAULT' }, { text: 'SEAT', value: 'SEAT' }, { text: 'SKODA', value: 'SKODA' }, { text: 'TOYOTA', value: 'TOYOTA' }, { text: 'VOLKSWAGEN', value: 'VOLKSWAGEN' },				],
				listeners: {
					change: function() {
						maj_modeles(this.value);
					}
				}
            },
			{
                xtype: 'selectfield',
                id: 'modele',
                name: 'modele',
                options: [{
                    text: '--- Modèle ---', value: ''
                }]
            },
			{
                xtype: 'selectfield',
                name: 'km',
                options: [{
                    text: '--- Kilométrage ---', value: ''
                }, {
                    text: 'Moins de 5 000 km',
					value: '0|5000'
                }, {
                    text: 'Moins de 10 000 km',
					value: '5000|10000'
                }, {
                    text: 'Moins de 25 000 km',
					value: '10000|25000'
                }, {
                    text: 'Moins de 50 000 km',
					value: '25000|50000'
                }, {
                    text: 'Moins de 100 000 km',
					value: '50000|100000'
                }]
            },
			{
                xtype: 'selectfield',
                name: 'annee',
                options: [{
                    text: '--- Année ---', value: ''
                },
                 { text: '2024', value: '2024' }, { text: '2023', value: '2023' }, { text: '2022', value: '2022' }, { text: '2021', value: '2021' }, { text: '2020', value: '2020' }, { text: '2019', value: '2019' }, { text: '2018', value: '2018' }, { text: '2017', value: '2017' }, { text: '2016', value: '2016' }, { text: '2015', value: '2015' }, { text: '2014', value: '2014' }, { text: '2013', value: '2013' }, { text: '2012', value: '2012' }, { text: '2011', value: '2011' }, { text: '2010', value: '2010' }, { text: '2009', value: '2009' }, { text: '2008', value: '2008' }, { text: '2007', value: '2007' }, { text: '2006', value: '2006' }, { text: '2005', value: '2005' },				]
            },
			{
                xtype: 'selectfield',
                name: 'prix',
                options: [{
                    text: '--- Prix ---', value: ''
                }, {
                    text: 'Moins de 7 500 €',
					value: '0|7500'
                }, {
                    text: 'Entre 7 500 € et 10 000 €',
					value: '7500|10000'
                }, {
                    text: 'Entre 10 000 € et 12 500 €',
					value: '10000|12500'
                }, {
                    text: 'Entre 12 500 € et 15 000 €',
					value: '12500|15000'
                }, {
                    text: 'Entre 15 000 € et 17 500 €',
					value: '15000|17500'
                }, {
                    text: 'Entre 17 500 € et 20 000 €',
					value: '17500|20000'
                }, {
                    text: 'Entre 20 000 € et 25 000 €',
					value: '20000|25000'
                }, {
                    text: 'Entre 25 000 € et 30 000 €',
					value: '25000|30000'
                }, {
                    text: 'Plus de 30 000 €',
					value: '30000|100000000'
                }]
            },
			{
                xtype: 'togglefield',
               	name: 'photo',
                label: 'Avec photo'
            }],
			dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            text: 'Nouvelle<br />recherche',
                            ui: 'action-small',
                            handler: function() {
								Ext.Ajax.request({
									url: 'ajax.php',
									method: 'POST',
									params: {init_vo:1},
									success: function (response, opts) {
									//document.getElementById('suite').innerHTML = '';
									//ajoute_vo(document.getElementById('suite'));
									//Ext.getCmp('vo').doComponentLayout();
									myForm.reset();
									//myForm.hide();
								},
								});
                            }
                        },
                        {xtype: 'spacer'},
                        {
                            text: 'Annuler',
                            handler: function() {
						        myForm.hide();
                            }
                        },
                        {
                            text: 'Rechercher',
                            ui: 'confirm',
                            handler: function() {
								Ext.Ajax.request({
									url: 'ajax.php',
									method: 'POST',
									params: {marque:myForm.getValues().marque, modele:myForm.getValues().modele, km:myForm.getValues().km, annee:myForm.getValues().annee, prix:myForm.getValues().prix, photo:myForm.getValues().photo},
									success: function (response, opts) {
									Ext.getCmp('recherche').setValue('');
									document.getElementById('suite').innerHTML = '';
									ajoute_vo(document.getElementById('suite'));
									Ext.getCmp('vo').doComponentLayout();
									myForm.hide();
								},
								});
                            }
                        },
                    ]
                }
            ]
        });
        DynamicForms.MyForm.superclass.initComponent.call(this);
    }
});

var myForm = new DynamicForms.MyForm();

//#######################################################################################
//### Panel principal VO
//#######################################################################################
monTab_vo = Ext.extend(Ext.TabPanel, {
	id: nom,
	title: titre_icone,
	iconCls: icone,
	cls: nom,
	height: 'auto',
	scroll: 'vertical',
	id: nom,
	listeners: {
		activate: function(tab) {
			Ext.Ajax.request({
				url: 'recup-tab.php?tab='+this.cls,
				success: function (response, opts) {
				tab.update(response.responseText, true);
				ajoute_vo(document.getElementById('suite'));
			},
			});
		}
	},
	dockedItems: [
		{
			xtype: 'tool_bar',
			style: {
				height: '30px',
				fontSize: '12px',
			},
		}
	]
});

Ext.reg(nom, monTab_vo);

//#######################################################################################
//### Champ de tri des véhicules
//#######################################################################################
var triPicker = new Ext.Picker({
	doneButton: 'Valider',
	listeners: {
		cancel: function () {
		},
		change: function (val) {
			var info = val.getValue()['info'];
			var ordre = val.getValue()['ordre'];
			$(document).ready(function ()
			{
				$.post("ajax.php", {init_listeVO: 1, info: info, ordre: ordre},
					function success(data)
					{
						document.getElementById('suite').innerHTML = '';
						ajoute_vo(document.getElementById('suite'));
						Ext.getCmp('vo').doComponentLayout();
					}
				)
			});
		},
	},
	slots: [
		{
			name: 'info',
			title: 'Info',
			data: [
				{text: 'Marque', value: 'marque'},
				{text: 'Kilom&eacute;trage', value: 'km'},
				{text: 'Ann&eacute;e', value: 'annee'},
				{text: 'Prix', value: 'prix'}
			]
		},
		{
			name: 'ordre',
			title: 'Ordre',
			data: [
				{text: 'Croissant', value: 'asc'},
				{text: 'D&eacute;croissant', value: 'desc'},
			]
		}
	]
});

//#######################################################################################
//### Barre d'outils en haut pour MAJ du listing VO
//#######################################################################################
maToolbar = Ext.extend(Ext.Toolbar, {
	title: titre,
	items: [
		{
		    text: '<img src="include/images/rechercher.png" style="width: 20px; height: 20px" />',
		 	ui: 'action',
		    handler: function()
			{
		        myForm.show();
            }
		},
		{
			xtype: 'spacer'
		},
		{
            xtype: 'textfield',
            name : 'recherche',
            id : 'recherche',
            label: '',
            useClearIcon: false,
            autoCapitalize : false,
            style: {fontSize: '15px', width: '70%'},
            placeHolder: 'Votre recherche...',
            allowBlank: false,
			listeners: {
				keyup: function(texte, e)
				{
					if (e.browserEvent.keyCode != 13)
					{
						Ext.Ajax.request({
							url: 'ajax.php',
							method: 'POST',
							params: {recherche:Ext.getCmp('recherche').getValue()},
							success: function (response, opts) {
								if (isset(myForm))
								{
									myForm.reset();
								}
								document.getElementById('suite').innerHTML = '';
								ajoute_vo(document.getElementById('suite'));
								//Ext.getCmp('vo').doComponentLayout();
								window.scrollTo(0,0);
							},
						});
					}
					else
					{
						window.scrollTo(0,0);
					}
				}
			}
		},
		{
			xtype: 'spacer'
		},
		{
		    text: '<img src="include/images/trier.png" style="width: 20px; height: 20px" />',
		    ui: 'action',
		    handler: function()
			{
            	triPicker.show();
            }
		}
	]
});

Ext.reg('tool_bar', maToolbar);